@import '../../variables.scss';

.theatre__audio-player {
  margin: auto;

  .content-window {
    border-bottom: none;
    border-top: .1rem solid;
    border-left: .1rem solid;
    border-right: .1rem solid;
    position: relative;
    overflow: hidden;
    padding: .1rem;

    .background-photo,
    .no-photo {
      object-fit: contain;
      display: block;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }

    .no-photo {
      font-size: 10rem;
      text-align: center;
      padding-top: 14%;
      height: inherit;

      @media screen and (max-width: $audio-player-tablet-max-width) {
        padding-top: 5%;
      }
    }

    & .BRprogresspopup {
      color: $3-gray;
      text-align: center;
    }

    .media-player {
      height: 0;
      &.with-waveform {
        height: 14rem;
      }
      &.no-waveform {
        height: 4.4rem;
      }
    }
  }

  .tabs {

    .tab-bottom{
      width: 100%;
      border-top: 1px solid #fff;
    }

    .option.selected {
      border-top-color: black;
    }
  }

  .playlist-section {
    padding: 1rem 2rem;

    @media (max-width: 599px) {
      padding-right: 0;
    }
  }

  .iframe-wrapper,
  .ia-player-wrapper {
    width: 99.5%;
  }

  .ia-player-wrapper,
  .iframe-wrapper {
    height: 4.4rem; // accomodate height for jwplayer controls
  }

  .ia-player-wrapper {
    .jwplayer {
      // this is here because Play8 sets a specific width on the style attribute
      // we need to trump it
      width: 100% !important;
    }
  }

  .iframe-wrapper {
    .iframe {
      position: absolute;
      top: 0.1rem;
      left: 0.1rem;
      width: 100%;
      height: 100%;
      right: 0.1rem;
      bottom: 0.1rem;
    }
  }
}