bbc/simorgh

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AmpMostRead should render as expected 1`] = `
.emotion-0 {
  color: #3F3F42;
  margin: 0;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-0 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-0 {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}

.emotion-1 {
  position: relative;
  padding-bottom: 1.5rem;
}

@supports (display: grid) {
  .emotion-1 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }
}

.emotion-3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

@media (max-width: 14.9375rem) {
  .emotion-4 {
    min-width: 2.5rem;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-4 {
    min-width: 2.5rem;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-4 {
    min-width: 3rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-4 {
    min-width: 4rem;
  }
}

.emotion-5 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 300;
  position: relative;
  color: #B80000;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 2.25rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-5 {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-5 {
    font-size: 3.5rem;
    line-height: 4.25rem;
  }
}

.emotion-6 {
  padding-top: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@supports (grid-template-columns: fit-content(200px)) {
  .emotion-6 {
    padding-right: 0;
  }
}

.emotion-7 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 500;
  position: static;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.emotion-7:hover,
.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-7:before {
  bottom: 0;
  content: '';
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }

  @media (min-width: 20rem) and (max-width: 37.4375rem) {
    .emotion-7 {
      font-size: 1.125rem;
      line-height: 1.375rem;
    }
  }

  @media (min-width: 37.5rem) {
    .emotion-7 {
      font-size: 1.25rem;
      line-height: 1.5rem;
    }
  }
}

<div>
  <amp-script
    id="dataFunctions"
    script="local-script"
  >
    <amp-list
      height="50"
      items="items"
      layout="responsive"
      max-items="10"
      src="amp-script:dataFunctions.getRemoteData"
      width="300"
    >
      <p
        class="emotion-0"
        fallback=""
      >
        Contenido no disponible
      </p>
      <template
        type="amp-mustache"
      >
        <li
          class="emotion-1 emotion-2"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-3"
          >
            <div
              class="emotion-4"
              dir="ltr"
            >
              <span
                class="emotion-5"
              >
                {{rankTranslation}}
              </span>
            </div>
            <div
              class="emotion-6"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-7"
                href="{{href}}"
              >
                {{title}}
              </a>
            </div>
          </div>
        </li>
      </template>
    </amp-list>
  </amp-script>
</div>
`;