{"version":3,"sources":["slider/slider.scss","slider/_variables.scss"],"names":[],"mappings":"AAEA,gBAKE,8ECFiC,CDGjC,wECLqB,CDGrB,cAAA,CADA,qCCEoB,CDJpB,iBAAA,CACA,UCDqB,CDQrB,uBAKE,YAAA,CAEA,UAAA,CADA,MAAA,CALA,iBAAA,CAGA,OAAA,CADA,SAIA,CAGF,uBAIE,0ECrB8B,CDsB9B,qBAAA,CAFA,WAAA,CAFA,iBAAA,CAKA,iGAAA,CAAA,4FAAA,CAAA,yFAAA,CAJA,UAIA,CAGF,uBAGE,uECrB6B,CDsB7B,mDCvByB,CDwBzB,0ECtBsB,CDsBtB,kECtBsB,CDmBtB,sCCtBkB,CDqBlB,oCClBsB,CDwBtB,oEAKE,mBAAA,CAAA,WAAA,CAHA,iBAAA,CAEA,OAAA,CADA,OAAA,CAGA,yCAAA,CAAA,iCAAA,CAGF,oCAIE,mBAAA,CAAA,WAAA,CADA,MAAA,CAFA,iBAAA,CACA,OAAA,CAGA,0CAAA,CAAA,kCAAA,CAIJ,0BACE,kBAAA,CACA,iECnDsB,CDqDtB,sLAGE,kBAAA,CAIJ,0BACE,oBAAA,CAEA,WAAA,CADA,oCACA,CAEA,wHAIE,QAAA,CADA,SAAA,CADA,QAAA,CAGA,wCAAA,CAAA,gCAAA,CAGF,8DAGE,SAAA,CADA,SAAA,CADA,KAAA,CAGA,yCAAA,CAAA,iCAAA,CAIF,iCAIE,QAAA,CACA,UAAA,CAFA,WAAA,CAFA,KAIA","file":"index.css","sourcesContent":["@import './variables';\n\n.#{$component-prefix}slider {\n  position: relative;\n  width: 100%;\n  height: $slider-track-height;\n  cursor: pointer;\n  background-color: $slider-inactive-background-color;\n  border-radius: $slider-border-radius;\n\n  // use pseudo element to expand click area\n  &::before {\n    position: absolute;\n    // TODO use scss var\n    top: -$padding-xs;\n    right: 0;\n    bottom: -$padding-xs;\n    left: 0;\n    content: '';\n  }\n\n  &__track {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background-color:$slider-active-background-color;\n    border-radius: inherit;\n    transition: all $slider-track-transition-duration;\n  }\n\n  &__thumb {\n    width: $slider-thumb-width;\n    height: $slider-thumb-height;\n    background-color: $slider-thumb-background-color;\n    border-radius: $slider-thumb-border-radius;\n    box-shadow: $slider-thumb-box-shadow;\n\n    &-wrapper,\n    &-wrapper-right {\n      position: absolute;\n      top: 50%;\n      right: 0;\n      cursor: grab;\n      transform: translate3d(50%, -50%, 0);\n    }\n\n    &-wrapper-left {\n      position: absolute;\n      top: 50%;\n      left: 0;\n      cursor: grab;\n      transform: translate3d(-50%, -50%, 0);\n    }\n  }\n\n  &--disabled {\n    cursor: not-allowed;\n    opacity: $slider-disabled-opacity;\n\n    .#{$component-prefix}slider__thumb-wrapper,\n    .#{$component-prefix}slider__thumb-wrapper-left,\n    .#{$component-prefix}slider__thumb-wrapper-right {\n      cursor: not-allowed;\n    }\n  }\n\n  &--vertical {\n    display: inline-block;\n    width: $slider-track-height;\n    height: 100%;\n\n    .#{$component-prefix}slider__thumb-wrapper,\n    .#{$component-prefix}slider__thumb-wrapper-right {\n      top: auto;\n      right: 50%;\n      bottom: 0;\n      transform: translate3d(50%, 50%, 0);\n    }\n\n    .#{$component-prefix}slider__thumb-wrapper-left {\n      top: 0;\n      right: 50%;\n      left: auto;\n      transform: translate3d(50%, -50%, 0);\n    }\n\n    // use pseudo element to expand click area\n    &::before {\n      top: 0;\n      // TODO use scss var\n      right: -$padding-xs;\n      bottom: 0;\n      left: -$padding-xs;\n    }\n  }\n}\n","@import \"../styles/prefix\";\n@import \"../styles/variables\";\n\n$slider-border-radius: var(--slider-border-radius, var(--border-radius-max, $border-radius-max));\n$slider-active-background-color:  var(--slider-active-background-color, var(--blue, $blue));\n$slider-inactive-background-color: var(--slider-inactive-background-color, var(--gray-3, $gray-3));\n$slider-disabled-opacity: var(--slider-disabled-opacity, var(--disabled-opacity, $disabled-opacity));\n$slider-track-height: var(--slider-track-height, 2px * $hd);\n$slider-track-transition-duration: var(--slider-track-transition-duration, var(--animation-duration-fast, $animation-duration-fast));\n$slider-thumb-width: var(--slider-thumb-width, 24px * $hd);\n$slider-thumb-height: var(--slider-thumb-height, 24px * $hd);\n$slider-thumb-border-radius: var(--slider-thumb-border-radius,  50%);\n$slider-thumb-background-color:  var(--slider-thumb-background-color, var(--white, $white));\n$slider-thumb-box-shadow: var(--slider-thumb-box-shadow, 0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5));\n"]}