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

%ad-status-overlay {
  @extend %ui-container;
  @include layout-align-bottom;

  $ad-status-overlay-bottom-offset: 5em;
  box-sizing: border-box;
  padding: 1em safe-area-max(1em, right) 0.5em safe-area-max(1em, left);
  bottom: calc(#{$ad-status-overlay-bottom-offset} + (max(1em, #{safe-area-inset(bottom)}) - 1em));
  pointer-events: none;

  * {
    pointer-events: none;
  }

  .#{$prefix}-ui-button-ad-skip {
    pointer-events: auto;
  }

  .#{$prefix}-bar {
    > .#{$prefix}-container-wrapper {
      display: flex;
      margin: 0.5em 0;
    }
  }
}

.#{$prefix}-ui-ad-status-overlay {
  @extend %ad-status-overlay;
}