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

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

  &:hover {
    @include svg-icon-shadow;
  }

  $seek-durations: 5, 10, 15, 20, 30, 60;

  &[data-#{$prefix}-seek-direction='forward'] {
    .#{$prefix}-ui-icon {
      background-image: svg-load('../../assets/images/quickseek-forward.svg', fill=$color-icon);
    }

    @each $duration in $seek-durations {
      &[data-#{$prefix}-seek-seconds='#{$duration}'] {
        .#{$prefix}-ui-icon {
          background-image: svg-load('../../assets/images/quickseek-forward-#{$duration}.svg', fill=$color-icon);
        }
      }
    }
  }

  &[data-#{$prefix}-seek-direction='rewind'] {
    .#{$prefix}-ui-icon {
      background-image: svg-load('../../assets/images/quickseek-back.svg', fill=$color-icon);
    }

    @each $duration in $seek-durations {
      &[data-#{$prefix}-seek-seconds='#{$duration}'] {
        .#{$prefix}-ui-icon {
          background-image: svg-load('../../assets/images/quickseek-back-#{$duration}.svg', fill=$color-icon);
        }
      }
    }
  }
}