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

%ui-button-ad-skip {
  @extend %ui-button;

  pointer-events: auto;
  background-color: transparentize($color-black, 0.25);
  border-radius: 20px;
  padding: 0.5em 1em;
  min-width: fit-content;

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

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

  &.#{$prefix}-disabled {
    .#{$prefix}-ui-icon {
      display: none;
    }
  }

  &:not(.#{$prefix}-disabled):hover {
    background-color: $color-black;
  }
}

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