////
/// @group slim-player-controls
////

/// Background color of info box.
$slim-player-controls-info-box-background-color: rgba(17, 17, 17, 0.9) !default;

/// Color of text in info box.
$slim-player-controls-info-box-text-color: #fff !default;

/// Color of separator line between info box header and info box text.
$slim-player-controls-info-box-separator-line-color: #888 !default;

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

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

%player_controls {
  &-info_box {
    width: 87%;
    box-sizing: border-box;
    padding: 0 1%;
    position: relative;
    z-index: 2;
    border-radius: 3px;
    color: $slim-player-controls-info-box-text-color;
    background-color: $slim-player-controls-info-box-background-color;

    @include phone {
      font-size: 0.84em;
      padding: 0 3%;
    }

    h3,
    p {
      @include typography(
        $slim-player-controls-info-box-typography, (
          font-size: 1.1em,
          margin: 15px 0,
          width: 100%,
          max-width: none
        )
      );
    }

    h3 {
      border-bottom: solid 1px $slim-player-controls-info-box-separator-line-color;
      padding-bottom: 5px;

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

    &.title_empty h3,
    &.description_empty h3 {
      padding-bottom: 0;
      border-bottom: none;
    }

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

    &.empty {
      display: none;
    }
  }

  .js &-info_box {
    @include transition(opacity 0.2s linear, visibility 0.2s linear, transform 0.2s ease);
    pointer-events: none;

    a {
      pointer-events: auto;
    }

    position: absolute;
    left: 50%;
    @include transform(translate3d(-50%, 0, 0));
    z-index: 2;

    @include desktop {
      @include transition-delay(0.2s);
      width: 100%;
      max-width: 700px;
      bottom: 80px;
    }

    @include phone {
      width: 100%;
      bottom: 50px;
      border-radius: 0;

      p {
        margin-bottom: 0;
      }
    }
  }

  @mixin faded {
    opacity: 0;
    visibility: hidden;
    @include transform(translate3d(-50%, 10px, 0));
  }

  @mixin visible {
    opacity: 1;
    visibility: visible;
    @include transform(translate3d(-50%, 0, 0));
  }

  @include desktop {
    .js &-info_box-hidden_during_playback {
      @include faded;
    }

    .js &-container-paused %player_controls-info_box {
      @include transition-delay(0);
      @include visible;
    }
  }

  @include phone {
    .js.has_no_native_video_player &-container-fading %player_controls-info_box {
      @include faded;
    }

    .js.has_no_native_video_player &-container-paused %player_controls-info_box {
      @include visible;
    }
  }
}

&.widget_classic_player_controls_replaced {
  %player_controls-info_box {
    display: none;
  }
}