{"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';\r\n\r\n.#{$component-prefix}slider {\r\n  position: relative;\r\n  width: 100%;\r\n  height: $slider-track-height;\r\n  cursor: pointer;\r\n  background-color: $slider-inactive-background-color;\r\n  border-radius: $slider-border-radius;\r\n\r\n  // use pseudo element to expand click area\r\n  &::before {\r\n    position: absolute;\r\n    // TODO use scss var\r\n    top: -$padding-xs;\r\n    right: 0;\r\n    bottom: -$padding-xs;\r\n    left: 0;\r\n    content: '';\r\n  }\r\n\r\n  &__track {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color:$slider-active-background-color;\r\n    border-radius: inherit;\r\n    transition: all $slider-track-transition-duration;\r\n  }\r\n\r\n  &__thumb {\r\n    width: $slider-thumb-width;\r\n    height: $slider-thumb-height;\r\n    background-color: $slider-thumb-background-color;\r\n    border-radius: $slider-thumb-border-radius;\r\n    box-shadow: $slider-thumb-box-shadow;\r\n\r\n    &-wrapper,\r\n    &-wrapper-right {\r\n      position: absolute;\r\n      top: 50%;\r\n      right: 0;\r\n      cursor: grab;\r\n      transform: translate3d(50%, -50%, 0);\r\n    }\r\n\r\n    &-wrapper-left {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 0;\r\n      cursor: grab;\r\n      transform: translate3d(-50%, -50%, 0);\r\n    }\r\n  }\r\n\r\n  &--disabled {\r\n    cursor: not-allowed;\r\n    opacity: $slider-disabled-opacity;\r\n\r\n    .#{$component-prefix}slider__thumb-wrapper,\r\n    .#{$component-prefix}slider__thumb-wrapper-left,\r\n    .#{$component-prefix}slider__thumb-wrapper-right {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &--vertical {\r\n    display: inline-block;\r\n    width: $slider-track-height;\r\n    height: 100%;\r\n\r\n    .#{$component-prefix}slider__thumb-wrapper,\r\n    .#{$component-prefix}slider__thumb-wrapper-right {\r\n      top: auto;\r\n      right: 50%;\r\n      bottom: 0;\r\n      transform: translate3d(50%, 50%, 0);\r\n    }\r\n\r\n    .#{$component-prefix}slider__thumb-wrapper-left {\r\n      top: 0;\r\n      right: 50%;\r\n      left: auto;\r\n      transform: translate3d(50%, -50%, 0);\r\n    }\r\n\r\n    // use pseudo element to expand click area\r\n    &::before {\r\n      top: 0;\r\n      // TODO use scss var\r\n      right: -$padding-xs;\r\n      bottom: 0;\r\n      left: -$padding-xs;\r\n    }\r\n  }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$slider-border-radius: var(--slider-border-radius, var(--border-radius-max, $border-radius-max));\r\n$slider-active-background-color:  var(--slider-active-background-color, var(--blue, $blue));\r\n$slider-inactive-background-color: var(--slider-inactive-background-color, var(--gray-3, $gray-3));\r\n$slider-disabled-opacity: var(--slider-disabled-opacity, var(--disabled-opacity, $disabled-opacity));\r\n$slider-track-height: var(--slider-track-height, 2px * $hd);\r\n$slider-track-transition-duration: var(--slider-track-transition-duration, var(--animation-duration-fast, $animation-duration-fast));\r\n$slider-thumb-width: var(--slider-thumb-width, 24px * $hd);\r\n$slider-thumb-height: var(--slider-thumb-height, 24px * $hd);\r\n$slider-thumb-border-radius: var(--slider-thumb-border-radius,  50%);\r\n$slider-thumb-background-color:  var(--slider-thumb-background-color, var(--white, $white));\r\n$slider-thumb-box-shadow: var(--slider-thumb-box-shadow, 0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5));\r\n"]}