@import '../../variables';
@import '../../mixins';

// Vertical space the pause status row occupies: its top inset, one line of text and its own
// vertical padding. Expressed in the status row's own font size rather than in `em`, so it does not
// change meaning when applied to an element with a different font size.
$pause-ad-status-row-height: calc(#{$font-size} * 3);

.#{$prefix}-ui-uicontainer.#{$prefix}-pause-ad-active {
  // Only the large centered playback control is suppressed. It would cover the creative, while
  // every other control stays visible and usable.
  .#{$prefix}-ui-playbacktoggle-overlay,
  .#{$prefix}-ui-touch-control-overlay .#{$prefix}-ui-smallcenteredplaybacktogglebutton {
    display: none;
  }

  // The titlebar gradient darkens the pause-ad badge and dismiss button above its content.
  .#{$prefix}-ui-titlebar {
    background: none;
  }

  // The pause status row owns the top edge, so title-bar content and its actions move below it
  // instead of sharing the corners with the badge and the dismiss button.
  .#{$prefix}-ui-titlebar > .#{$prefix}-container-wrapper {
    margin-top: $pause-ad-status-row-height;
  }

  // Source metadata describes the content behind the ad and competes with the ad message.
  // Keep the title bar itself so its cast and AirPlay actions remain available.
  .#{$prefix}-ui-titlebar .#{$prefix}-label-metadata {
    display: none;
  }

  &.#{$prefix}-controls-shown .#{$prefix}-ui-touch-control-overlay {
    background-color: transparent;
  }
}

.#{$prefix}-ui-pause-ad-status-overlay {
  @extend %ui-container;
  @include layout-cover;
  @include hidden;

  box-sizing: border-box;
  pointer-events: none;

  * {
    pointer-events: none;
  }
}

// Covers the player while remaining below the visible controls.
.#{$prefix}-ui-pause-ad-click-catcher {
  @include layout-cover;
  @include hidden;

  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}

// The mobile gesture surface routes confirmed single taps and keeps double-tap seeking.
.#{$prefix}-ui-pause-ad-status-overlay.#{$prefix}-touch-click-through {
  .#{$prefix}-ui-pause-ad-click-catcher {
    pointer-events: none;
  }
}

.#{$prefix}-ui-pause-ad-status-badge,
.#{$prefix}-ui-button-pause-ad-dismiss {
  background-color: transparentize($color-black, 0.25);
  border-radius: 20px;
  box-sizing: border-box;
  color: $color-highlight-ads;
  font-size: $font-size;
  min-width: fit-content;
  padding: 0.5em 1em;

  .#{$prefix}-label,
  .#{$prefix}-ui-label-text {
    color: $color-highlight-ads;
  }
}

.#{$prefix}-ui-pause-ad-status-badge {
  @extend %ui-label;

  left: safe-area-max(1em, left);
  position: absolute;
  top: safe-area-max(1em, top);
}

.#{$prefix}-ui-button-pause-ad-dismiss {
  @extend %ui-button;

  height: auto;
  pointer-events: auto;
  position: absolute;
  right: safe-area-max(1em, right);
  top: safe-area-max(1em, top);

  .#{$prefix}-ui-icon {
    background-image: svg-load('../../assets/images/close.svg', stroke=$color-icon-highlight-ads);
  }

  &:hover {
    background-color: $color-black;
  }
}