Sign upLogin

bbc/simorgh

View on GitHub
Star
src/app/legacy/components/RadioSchedule/__snapshots__/index.test.jsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RadioSchedule should render ltr radio schedules correctly 1`] = `
@keyframes animation-0 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.emotion-1 {
  padding: 0;
  margin: 0;
}

@media (max-width: 14.9375rem) {
  .emotion-1 {
    padding: 0 0.5rem;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-1 {
    padding: 0 0.5rem;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-1 {
    padding: 0 1rem;
  }
}

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

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

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

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

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

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

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

@media (max-width: 37.5rem) {
  .emotion-1 {
    padding: 0;
  }
}

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

@media (max-width: 14.9375rem) {
  .emotion-4 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-4 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-4 {
    width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-4 {
    width: calc(3/6*(100% - 6 * 1rem) + 2 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-4 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-4 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  .emotion-4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.emotion-6 {
  padding-bottom: 0.5rem;
}

.emotion-8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.emotion-10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 0.25rem;
}

.emotion-10>svg {
  color: #5A5A5A;
  margin: 0;
  overflow: visible;
}

@media screen and (forced-colors: active) {
  .emotion-10>svg {
    fill: canvasText;
  }
}

.emotion-12 {
  vertical-align: middle;
  margin: 0 0.25rem;
  color: #222222;
  fill: currentColor;
  width: 0.725rem;
  height: 0.725rem;
}

.emotion-14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.emotion-14>time {
  color: #5A5A5A;
  font-size: 0.75rem;
  line-height: 1rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-14>time {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-14>time {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.emotion-14::after {
  content: '';
  border-top: 0.0625rem solid #AEAEB5;
  top: 1rem;
  margin-left: 0.625rem;
  width: 100%;
}

.emotion-16 {
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #545658;
  display: block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

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

.emotion-18 {
  padding-top: 0.5rem;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  outline: 0.0625rem solid transparent;
  height: 100%;
}

.emotion-20 {
  padding: 0 0.5rem;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.emotion-22 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #222222;
  margin: 0;
}

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

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

.emotion-24 {
  position: static;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  overflow-wrap: break-word;
  display: inline-block;
}

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

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

.emotion-24:visited {
  color: #6E6E73;
}

.emotion-24:hover .emotion-32 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-24:focus .emotion-32 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-26 {
  color: #006666;
  display: inline-block;
  vertical-align: -0.125rem;
  position: relative;
  -webkit-margin-end: 0.25rem;
  margin-inline-end: 0.25rem;
  width: 0.9375rem;
  height: 0.9375rem;
}

@media (min-width: 25rem) {
  .emotion-26 {
    width: 1rem;
    height: 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .emotion-27 {
    -webkit-animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
    animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
  }
}

.emotion-28 {
  color: #006666;
  display: inline-block;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 700;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.emotion-29 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-31 {
  color: #3F3F42;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

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

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

.emotion-34 {
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #6E6E73;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  margin: 0;
}

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

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

.emotion-36 {
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem;
  background-color: #006666;
  outline: 0.0625rem solid transparent;
  color: #FFFFFF;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .emotion-36 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-38>svg {
  color: #FFFFFF;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-38>svg {
    fill: canvasText;
  }
}

.emotion-40 {
  vertical-align: middle;
  margin: 0 0.25rem;
  color: #222222;
  fill: currentColor;
  width: 0.75rem;
  height: 0.75rem;
}

.emotion-42 {
  padding-left: 0.5rem;
}

.emotion-74 {
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem;
  background-color: #222222;
  outline: 0.0625rem solid transparent;
  color: #FFFFFF;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .emotion-74 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-139 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #6E6E73;
  margin: 0;
}

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

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

.emotion-142 {
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #B80000;
  display: inline-block;
  margin-right: 0.5rem;
}

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

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

.emotion-145 {
  color: #6E6E73;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

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

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

.emotion-150 {
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem;
  background-color: #FFFFFF;
  outline: 0.0625rem solid transparent;
  color: #B80000;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .emotion-150 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-152>svg {
  color: #B80000;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-152>svg {
    fill: canvasText;
  }
}

<div>
  <div
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="list"
  >
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="live"
      dir="ltr"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="ltr"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="ltr"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              14:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p0"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/news/articles/cn7k01xp8kxo"
            >
              <span
                id="scheduleItem-p0"
                role="text"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-26"
                  fill="currentColor"
                  focusable="false"
                  height="16"
                  viewBox="0 0 32 32"
                  width="16"
                >
                  <path
                    d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"
                  />
                  <circle
                    class="emotion-27"
                    cx="16"
                    cy="16"
                    r="8.5"
                  />
                </svg>
                <span
                  role="text"
                >
                  <span
                    aria-hidden="true"
                    class="emotion-28"
                    dir="ltr"
                  >
                    LIVE
                  </span>
                  <span
                    class="emotion-29"
                    lang="en-GB"
                  >
                     Listen Live, 
                  </span>
                </span>
                Could a computer ever create better art than a human?
                <span
                  class="emotion-29"
                >
                  , 14:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 August 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , Duration 1,00,00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            The critic, author, poet and TV host was known for his witty commentary on international television.
          </p>
        </div>
        <div
          class="emotion-36 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="ltr"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="onDemand"
      dir="ltr"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="ltr"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="ltr"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              14:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p1"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/news/articles/cn7k01xp8kxo"
            >
              <span
                id="scheduleItem-p1"
                role="text"
              >
                <span
                  class="emotion-29"
                >
                  Listen, 
                </span>
                Could a computer ever create better art than a human?
                <span
                  class="emotion-29"
                >
                  , 14:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 August 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , Duration 1,00,00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            The critic, author, poet and TV host was known for his witty commentary on international television.
          </p>
        </div>
        <div
          class="emotion-74 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="ltr"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="onDemand"
      dir="ltr"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="ltr"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="ltr"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              14:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p2"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/news/articles/cn7k01xp8kxo"
            >
              <span
                id="scheduleItem-p2"
                role="text"
              >
                <span
                  class="emotion-29"
                >
                  Listen, 
                </span>
                Could a computer ever create better art than a human?
                <span
                  class="emotion-29"
                >
                  , 14:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 August 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , Duration 1,00,00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            The critic, author, poet and TV host was known for his witty commentary on international television.
          </p>
        </div>
        <div
          class="emotion-74 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="ltr"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="next"
      dir="ltr"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="ltr"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="ltr"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              14:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-139 emotion-23"
          >
            <span
              id="scheduleItem-p3"
              role="text"
            >
              <span
                class="emotion-29"
              >
                Listen Next, 
              </span>
              <span
                aria-hidden="true"
                class="emotion-142 emotion-143"
                dir="ltr"
              >
                NEXT 
              </span>
              Could a computer ever create better art than a human?
              <span
                class="emotion-29"
              >
                , 14:54, 
              </span>
              <span
                class="emotion-145 emotion-32"
              >
                27 August 2019
              </span>
              <span
                class="emotion-29"
              >
                , Duration 1,00,00 
              </span>
            </span>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            The critic, author, poet and TV host was known for his witty commentary on international television.
          </p>
        </div>
        <div
          class="emotion-150 emotion-37"
        >
          <span
            class="emotion-152 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="ltr"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
  </div>
</div>
`;

exports[`RadioSchedule should render rtl radio schedules correctly 1`] = `
@keyframes animation-0 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.emotion-1 {
  padding: 0;
  margin: 0;
}

@media (max-width: 14.9375rem) {
  .emotion-1 {
    padding: 0 0.5rem;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-1 {
    padding: 0 0.5rem;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-1 {
    padding: 0 1rem;
  }
}

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

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

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

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

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

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

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

@media (max-width: 37.5rem) {
  .emotion-1 {
    padding: 0;
  }
}

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

@media (max-width: 14.9375rem) {
  .emotion-4 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-4 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-4 {
    width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-4 {
    width: calc(3/6*(100% - 6 * 1rem) + 2 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-4 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-4 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  .emotion-4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.emotion-6 {
  padding-bottom: 0.5rem;
}

.emotion-8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.emotion-10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0.25rem;
}

.emotion-10>svg {
  color: #5A5A5A;
  margin: 0;
  overflow: visible;
}

@media screen and (forced-colors: active) {
  .emotion-10>svg {
    fill: canvasText;
  }
}

.emotion-12 {
  vertical-align: middle;
  margin: 0 0.25rem;
  color: #222222;
  fill: currentColor;
  width: 0.725rem;
  height: 0.725rem;
}

.emotion-14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.emotion-14>time {
  color: #5A5A5A;
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-14>time {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-14>time {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

.emotion-14::after {
  content: '';
  border-top: 0.0625rem solid #AEAEB5;
  top: 1.0625rem;
  margin-right: 0.625rem;
  width: 100%;
}

.emotion-16 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #545658;
  display: block;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

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

.emotion-18 {
  padding-top: 0.5rem;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  outline: 0.0625rem solid transparent;
  height: 100%;
}

.emotion-20 {
  padding: 0 0.5rem;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.emotion-22 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #222222;
  margin: 0;
}

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

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

.emotion-24 {
  position: static;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  overflow-wrap: break-word;
  display: inline-block;
}

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

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

.emotion-24:visited {
  color: #6E6E73;
}

.emotion-24:hover .emotion-32 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-24:focus .emotion-32 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-26 {
  color: #006666;
  display: inline-block;
  vertical-align: -0.125rem;
  position: relative;
  -webkit-margin-end: 0.25rem;
  margin-inline-end: 0.25rem;
  width: 0.9375rem;
  height: 0.9375rem;
}

@media (min-width: 25rem) {
  .emotion-26 {
    width: 1rem;
    height: 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .emotion-27 {
    -webkit-animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
    animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
  }
}

.emotion-28 {
  color: #006666;
  display: inline-block;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 700;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.emotion-29 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-31 {
  color: #3F3F42;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

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

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

.emotion-34 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6E6E73;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  margin: 0;
}

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

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

.emotion-36 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem;
  padding: 0.5rem;
  background-color: #006666;
  outline: 0.0625rem solid transparent;
  color: #FFFFFF;
}

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

@media (min-width: 37.5rem) {
  .emotion-36 {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

@media screen and (-ms-high-contrast: active) {
  .emotion-36 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-38>svg {
  color: #FFFFFF;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-38>svg {
    fill: canvasText;
  }
}

.emotion-40 {
  vertical-align: middle;
  margin: 0 0.25rem;
  color: #222222;
  fill: currentColor;
  width: 0.75rem;
  height: 0.75rem;
}

.emotion-42 {
  padding-right: 0.5rem;
}

.emotion-74 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem;
  padding: 0.5rem;
  background-color: #222222;
  outline: 0.0625rem solid transparent;
  color: #FFFFFF;
}

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

@media (min-width: 37.5rem) {
  .emotion-74 {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

@media screen and (-ms-high-contrast: active) {
  .emotion-74 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-139 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #6E6E73;
  margin: 0;
}

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

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

.emotion-142 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #B80000;
  display: inline-block;
  margin-left: 0.5rem;
}

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

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

.emotion-145 {
  color: #6E6E73;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

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

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

.emotion-150 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem;
  padding: 0.5rem;
  background-color: #FFFFFF;
  outline: 0.0625rem solid transparent;
  color: #B80000;
}

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

@media (min-width: 37.5rem) {
  .emotion-150 {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}

@media screen and (-ms-high-contrast: active) {
  .emotion-150 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-152>svg {
  color: #B80000;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-152>svg {
    fill: canvasText;
  }
}

<div>
  <div
    class="emotion-0 emotion-1 emotion-2"
    dir="rtl"
    role="list"
  >
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="live"
      dir="rtl"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="rtl"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="rtl"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              13:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p0"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/arabic/articles/c1er5mjnznzo"
            >
              <span
                id="scheduleItem-p0"
                role="text"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-26"
                  fill="currentColor"
                  focusable="false"
                  height="16"
                  viewBox="0 0 32 32"
                  width="16"
                >
                  <path
                    d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"
                  />
                  <circle
                    class="emotion-27"
                    cx="16"
                    cy="16"
                    r="8.5"
                  />
                </svg>
                <span
                  role="text"
                >
                  <span
                    aria-hidden="true"
                    class="emotion-28"
                    dir="rtl"
                  >
                    مباشر
                  </span>
                  <span
                    class="emotion-29"
                    lang="en-GB"
                  >
                     استمع للبث المباشر, 
                  </span>
                </span>
                لماذا يخجل البعض من اسم قريته في مصر؟
                <span
                  class="emotion-29"
                >
                  , 13:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 أغسطس/ آب 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , المدة الزمنية 1،00،00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            هناك وقائع عدة تتسم بالسخرية والجدل والتنمر، ضد أهل القرية الذين أصابهم الغضب والسخط مما دفعهم إلى تقديم طلب لتغيير اسم قريتهم.
          </p>
        </div>
        <div
          class="emotion-36 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="rtl"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="onDemand"
      dir="rtl"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="rtl"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="rtl"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              13:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p1"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/arabic/articles/c1er5mjnznzo"
            >
              <span
                id="scheduleItem-p1"
                role="text"
              >
                <span
                  class="emotion-29"
                >
                  استمع, 
                </span>
                لماذا يخجل البعض من اسم قريته في مصر؟
                <span
                  class="emotion-29"
                >
                  , 13:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 أغسطس/ آب 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , المدة الزمنية 1،00،00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            هناك وقائع عدة تتسم بالسخرية والجدل والتنمر، ضد أهل القرية الذين أصابهم الغضب والسخط مما دفعهم إلى تقديم طلب لتغيير اسم قريتهم.
          </p>
        </div>
        <div
          class="emotion-74 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="rtl"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="onDemand"
      dir="rtl"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="rtl"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="rtl"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              13:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-22 emotion-23"
          >
            <a
              aria-labelledby="scheduleItem-p2"
              class="focusIndicatorDisplayBlock emotion-24 emotion-25"
              href="/arabic/articles/c1er5mjnznzo"
            >
              <span
                id="scheduleItem-p2"
                role="text"
              >
                <span
                  class="emotion-29"
                >
                  استمع, 
                </span>
                لماذا يخجل البعض من اسم قريته في مصر؟
                <span
                  class="emotion-29"
                >
                  , 13:54, 
                </span>
                <span
                  class="emotion-31 emotion-32"
                >
                  27 أغسطس/ آب 2019
                </span>
                <span
                  class="emotion-29"
                >
                  , المدة الزمنية 1،00،00 
                </span>
              </span>
            </a>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            هناك وقائع عدة تتسم بالسخرية والجدل والتنمر، ضد أهل القرية الذين أصابهم الغضب والسخط مما دفعهم إلى تقديم طلب لتغيير اسم قريتهم.
          </p>
        </div>
        <div
          class="emotion-74 emotion-37"
        >
          <span
            class="emotion-38 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="rtl"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
    <li
      class="emotion-3 emotion-4 emotion-2"
      data-e2e="next"
      dir="rtl"
      role="listitem"
    >
      <div
        class="emotion-6 emotion-7"
      >
        <div
          class="emotion-8 emotion-9"
        >
          <span
            class="emotion-10 emotion-11"
            dir="rtl"
          >
            <svg
              aria-hidden="true"
              class="emotion-12 emotion-13"
              focusable="false"
              height="13"
              viewBox="0 0 13 13"
              width="13"
            >
              <path
                d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
              />
              <path
                d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
              />
            </svg>
          </span>
          <span
            aria-hidden="true"
            class="emotion-14 emotion-15"
            dir="rtl"
          >
            <time
              class="emotion-16 emotion-17"
              datetime="2019-08-27"
            >
              13:54
            </time>
          </span>
        </div>
      </div>
      <div
        class="emotion-18 emotion-19"
      >
        <div
          class="emotion-20 emotion-21"
        >
          <h3
            class="emotion-139 emotion-23"
          >
            <span
              id="scheduleItem-p3"
              role="text"
            >
              <span
                class="emotion-29"
              >
                واصل الاستماع, 
              </span>
              <span
                aria-hidden="true"
                class="emotion-142 emotion-143"
                dir="rtl"
              >
                لاحق 
              </span>
              لماذا يخجل البعض من اسم قريته في مصر؟
              <span
                class="emotion-29"
              >
                , 13:54, 
              </span>
              <span
                class="emotion-145 emotion-32"
              >
                27 أغسطس/ آب 2019
              </span>
              <span
                class="emotion-29"
              >
                , المدة الزمنية 1،00،00 
              </span>
            </span>
          </h3>
          <p
            class="emotion-34 emotion-35"
          >
            هناك وقائع عدة تتسم بالسخرية والجدل والتنمر، ضد أهل القرية الذين أصابهم الغضب والسخط مما دفعهم إلى تقديم طلب لتغيير اسم قريتهم.
          </p>
        </div>
        <div
          class="emotion-150 emotion-37"
        >
          <span
            class="emotion-152 emotion-39"
          >
            <svg
              aria-hidden="true"
              class="emotion-40 emotion-41"
              focusable="false"
              height="12px"
              viewBox="0 0 13 12"
              width="13px"
            >
              <path
                d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
              />
              <path
                d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
              />
            </svg>
          </span>
          <time
            class="emotion-42 emotion-43"
            datetime="PT1H"
            dir="rtl"
          >
            <span
              aria-hidden="true"
            >
              1:00:00
            </span>
          </time>
        </div>
      </div>
    </li>
  </div>
</div>
`;