$nypr-player-transition-timing               : 100ms !default;
$nypr-player-transition-timing-queue         : 150ms !default;

/* Color basics */
$nypr-player-primary-color                   : #FFF !default;
$nypr-player-background-color                : #333 !default;
$nypr-player-accent-color                    : #128cf4 !default;

/* Color specifics are made out of the button basics */
$nypr-player-floating-queue-button-background: $nypr-player-background-color !default;
$nypr-player-button-color                    : $nypr-player-primary-color !default;
$nypr-player-button-hover-color              : rgba($nypr-player-primary-color, 0.8) !default;
$nypr-player-button-active-color             : $nypr-player-accent-color !default;
$nypr-player-slider-handle-color             : #fff !default;

@mixin svg-color($color) {
    polygon, rect, circle, path {
      color: $color;
      fill: currentColor;
      transition: color $nypr-player-transition-timing ease-in-out, stroke $nypr-player-transition-timing ease-in-out, fill $nypr-player-transition-timing ease-in-out;
    }
  }

$button-width: 50px;
$slider-width: 76px;
$slider-height: 3px;
$handle-diameter:  15px;
$handle-radius:  $handle-diameter / 2;
$slider-spacing-left:  $handle-diameter;
$slider-spacing-right: $handle-radius + 2px;
$slider-spacing: $slider-spacing-left + $slider-spacing-right;

.nypr-player-volume {
  margin-left: 42px;
  margin-right: 18px;
  display: flex;
  height: 100%;
}

.nypr-player-button.mod-volume {
  margin-top: 0;
  min-width: $button-width;
  height: 100%;
  white-space: nowrap;
}

.nypr-player-volume-control {
  display: flex;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba($nypr-player-primary-color, 0);

  &.volume-hover,
  &:hover,
  &:focus {
    .nypr-player-volume-slider-wrapper, {
      width: $slider-width + $slider-spacing;
      transition: width .3s cubic-bezier(0.4, 0.4, 0.265, 1.55);
    }
  }
}

.nypr-player-volume-slider-wrapper {
  width: 0;
  display: inline-block;
  position: relative;
  touch-action: none;
  height: 100%;
  overflow: hidden;
  // when transitioning width to 0, make sure bezier curve doesn't go above the 1 line, because that will
  // cause width to go negative in safari and probably have unintended effects.
  transition: width .3s cubic-bezier(0.4, 0.4, 0.265, 0.99);
}

.nypr-player-volume-slider {
  display: block;
  position: relative;
  height: 100%;
  width: $slider-width;
  margin-left:  $slider-spacing-left;
  margin-right: $slider-spacing-right;
}

.nypr-player-volume-slider-track {
  background: $nypr-player-button-color;
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  height: $slider-height;
  margin-top: -$slider-height / 2;
  width: 100%;

  &:after {
    @extend .nypr-player-volume-slider-track;
    content: '';
    width: $slider-width;
    background: rgba($nypr-player-button-color, 0.2);
    z-index: -1;
  }
}

.nypr-player-volume-slider-handle {
  position: absolute;
  top: 50%;
  width: $handle-diameter;
  height: $handle-diameter;
  border-radius: 50%;
  background: $nypr-player-slider-handle-color;
  margin-top: -$handle-radius;
  left: 100%;
  transform: translateX(-$handle-radius);
}

.nypr-player-button.mod-volume {
  display: inline-block;
  flex-basis: $button-width;
  min-width: $button-width;
  position: relative;
  height: 100%;
  cursor: pointer;

  @include svg-color($nypr-player-button-color);
  &:hover,
  &:focus {
    @include svg-color($nypr-player-button-hover-color);
  }
  &:active {
    @include svg-color($nypr-player-button-active-color);
  }

  .nypr-player-icon {
    height: 33px;
    width: 28px;
    position: absolute;
    top: 22px;
    right: 5px;

    .nypr-player__freestanding & {
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
}

.nypr-player-volume {
  .nypr-player-icon {
    @include svg-color($nypr-player-button-color);
    &:hover,
    &:focus {
      @include svg-color($nypr-player-button-hover-color);
    }
    &:active {
      @include svg-color($nypr-player-button-active-color);
    }
  }
}