/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~bpk-mixins';

$bpk-spacing-v2: true;

$slider-control-inset-size: 22 * $bpk-one-pixel-rem;
$slider-large-control-inset-size: bpk-spacing-sm() * 7;

.bpk-slider {
  height: bpk-spacing-xl();
  -webkit-tap-highlight-color: transparent;

  &--large {
    height: bpk-spacing-xxl();
  }

  &__handle {
    display: flex;
    width: bpk-spacing-xl();
    height: bpk-spacing-xl();
    justify-content: center;
    align-items: center;
    border: $bpk-one-pixel-rem solid $bpk-color-sky-gray-tint-06;
    border-radius: $bpk-border-radius-pill;
    background-color: $bpk-color-white;
    cursor: pointer;

    @include bpk-box-shadow-sm;

    &::after {
      content: '';
      display: block;
      width: $slider-control-inset-size;
      height: $slider-control-inset-size;
      border-radius: $bpk-border-radius-pill;
      box-shadow: inset 0 0 0 $bpk-one-pixel-rem $bpk-color-sky-gray-tint-04;
    }

    &--active {
      transform: scale(1.2) translate3d(0, 0, 0);
    }

    &--large {
      width: bpk-spacing-xxl();
      height: bpk-spacing-xxl();
      border-radius: $bpk-border-radius-pill-lg;

      &::after {
        width: $slider-large-control-inset-size;
        height: $slider-large-control-inset-size;
        border-radius: $bpk-border-radius-pill-lg;
      }
    }
  }

  &__bar {
    top: calc(50% - #{bpk-spacing-sm()});
    height: bpk-spacing-md();
    border-radius: $bpk-border-radius-sm;
    background-color: $bpk-color-sky-gray-tint-06;
  }

  // stylelint-disable-next-line selector-attribute-quotes
  > div[class$='0'] {
    @include bpk-themeable-property(
      background-color,
      --bpk-slider-bar-color,
      $bpk-color-sky-blue-shade-03
    );
  }

  &--range {
    // stylelint-disable-next-line selector-attribute-quotes
    > div[class$='0'] {
      background-color: $bpk-color-sky-gray-tint-06;
    }
    // stylelint-disable-next-line selector-attribute-quotes
    > div[class$='1'] {
      @include bpk-themeable-property(
        background-color,
        --bpk-slider-bar-color,
        $bpk-color-sky-blue-shade-03
      );
    }
  }
}