@use "settings/breakpoints";
@use "settings/captions";
@use "settings/cosmetics";
@use "settings/sliders";

// ==========================================================================
// Mixins
// ==========================================================================

// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: cosmetics.$plyr-tab-focus-color) {
  outline-color: $color;
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}

// Font smoothing
// ---------------------------------------
@mixin plyr-font-smoothing($mode: true) {
  @if $mode {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
}

// <input type="range"> styling
// ---------------------------------------
@mixin plyr-range-track() {
  background: transparent;
  border: 0;
  border-radius: calc(#{sliders.$plyr-range-track-height} / 2);
  height: sliders.$plyr-range-track-height;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

@mixin plyr-range-thumb() {
  background: sliders.$plyr-range-thumb-background;
  border: 0;
  border-radius: 100%;
  box-shadow: sliders.$plyr-range-thumb-shadow;
  height: sliders.$plyr-range-thumb-height;
  position: relative;
  transition: all 0.2s ease;
  width: sliders.$plyr-range-thumb-height;
}

@mixin plyr-range-thumb-active($color) {
  box-shadow: sliders.$plyr-range-thumb-shadow, 0 0 0 sliders.$plyr-range-thumb-active-shadow-width $color;
}

// Fullscreen styles
// ---------------------------------------
@mixin plyr-fullscreen-active() {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;

  video {
    height: 100%;
  }

  .plyr__video-wrapper {
    height: 100%;
    position: static;
  }

  // Vimeo requires some different styling
  &.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
  }

  // Display correct icon
  .plyr__control .icon--exit-fullscreen {
    display: block;

    + svg {
      display: none;
    }
  }

  // Hide cursor in fullscreen when controls hidden
  &.plyr--hide-controls {
    cursor: none;
  }

  // Large captions in full screen on larger screens
  @media (min-width: breakpoints.$plyr-bp-lg) {
    .plyr__captions {
      font-size: captions.$plyr-font-size-captions-large;
    }
  }
}