////
/// @group classic-player-controls
////

/// Background color of the info box.
$classic-player-controls-info-box-background-color: rgba(39, 39, 39, 0.95) !default;

/// Color of the text inside the info box.
$classic-player-controls-info-box-text-color: #fff !default;

/// Text color of the info box header.
$classic-player-controls-info-box-header-color: null !default;

/// Typography settings for the info box.
$classic-player-controls-info-box-typography: () !default;

/// Typography settings for the info box header.
$classic-player-controls-info-box-header-typography: () !default;

/// Display rounded corners at the top of the info box.
$classic-player-controls-info-box-border-radius: 4px !default;

%player_controls {
  &-info_box {
    width: 87%;
    margin: 1em 5% 1.5em 8%;
    position: relative;
    z-index: 2;
    color: $classic-player-controls-info-box-text-color;

    @include typography(
      $classic-player-controls-info-box-typography, (
        font-size: 0.8em
      )
    );

    @include phone {
      font-size: 0.84em;
    }

    h3 {
      color: $classic-player-controls-info-box-header-color;

      @include typography(
        $classic-player-controls-info-box-header-typography
      );
    }

    h3,
    p {
      margin: 15px 3%;
      width: 94%;
    }

    a {
      color: $classic-player-controls-info-box-text-color;
    }

    &.empty {
      display: none;
    }

    &:before {
      content: "";
      position: absolute;
      left: -$classic-player-controls-border-width;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: $classic-player-controls-info-box-background-color;
      border: solid $classic-player-controls-border-width transparent;
      z-index: -1;

      border-top-left-radius: $classic-player-controls-info-box-border-radius;
      border-top-right-radius: $classic-player-controls-info-box-border-radius;
    }
  }

  .js &-info_box {
    pointer-events: none;

    a {
      pointer-events: all;
    }

    margin: 0;
    margin-bottom: 60px + $classic-player-controls-border-width * 4;
    width: 434px;
    bottom: 100%;
    position: absolute;
    left: 50%;
    @include transform(translate3d(-50%, 0, 0));
    z-index: 2;

    @include phone {
      bottom: 0;
      position: relative;
      padding: 1px;
      margin-bottom: 0;
      padding-left: 0;
      max-width: 435px;
      min-height: 60px;
      width: 100%;
      min-width: 260px;

      &.empty {
        display: block;
        width: 60px;
        @include transform(translate3d(0, 0, 0));
        left: 0;
        min-width: 0;

        &:before {
          display: none;
        }
      }

      &:after {
        content: "";
        position: absolute;
        left: -3px;
        top: 0;
        width: 60px;
        height: 100%;
        padding-bottom: 0;
        background-color: $classic-player-controls-background-color;
        z-index: -1;
        opacity: 0.9;
      }

      &:before {
        border: 0;
      }

      h3,
      p {
        margin-left: 70px;
        width: 70%;
      }
    }
  }
}