// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";
@import "../../common/icons";
@import "../../common/mixins";
@import "../button/common";

@mixin slider($height) {
  position: relative;
  cursor: default;
  width: 100%;
  min-width: $pt-grid-size * 15;
  height: $height;

  &:hover {
    cursor: pointer;
  }

  &:active {
    cursor: grabbing;
  }

  &.pt-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@mixin slider-track($handle-height, $track-height) {
  position: absolute;
  top: ($handle-height - $track-height) / 2;
  right: 0;
  left: 0;
  border-radius: $pt-border-radius;
  background: rgba($gray1, 0.2);
  height: $track-height;

  .pt-dark & {
    background: rgba($black, 0.5);
  }
}

@mixin slider-handle($handle-height, $track-height) {
  @include pt-button();
  position: absolute;
  top: 0;
  left: 0;
  border-radius: $pt-border-radius;
  box-shadow: $button-box-shadow-overlay;
  cursor: pointer;
  width: $handle-height;
  height: $handle-height;

  // ensure target handle's label always covers neighbors
  &:focus {
    z-index: 1;
  }

  &:hover {
    @include pt-button-hover();
    z-index: 2;
    box-shadow: $button-box-shadow-overlay;
    cursor: grab;
  }

  &.pt-active {
    @include pt-button-active();
    box-shadow: $button-box-shadow-overlay-active;
    cursor: grabbing;
  }

  .pt-disabled & {
    box-shadow: none;
    background: $gray5;
    // easy way to avoid lots of special cases to ignore mouse states when disabled:
    pointer-events: none;
  }

  .pt-dark & {
    @include pt-dark-button();

    &,
    &:hover {
      background-color: $dark-gray5;
    }

    &.pt-active {
      background-color: $dark-gray3;
    }
  }

  .pt-dark .pt-disabled & {
    border-color: $gray1;
    box-shadow: none;
    background: $gray1;
  }
}

@mixin slider-label() {
  display: inline-block;
  padding: ($pt-grid-size / 5) ($pt-grid-size / 2);
  vertical-align: top;
  line-height: 1;
  font-size: $pt-font-size-small;
}