/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */

/* táhlo na koncích */
$noui-handle-size: 16px !default;
$noui-handle-color: $brand-primary !default;
$noui-handle-width: 1px !default;

/* linka */
$noui-bg-inactive: $body-bg !default;
$noui-bg-active: $brand-primary !default;
$noui-bg-height: 4px !default;
$noui-bg-border-width: 1px !default;
$noui-bg-border-color: $border-color !default;


.noUi-target,
.noUi-target * {
   touch-action: none;
   user-select: none;
}

// neaktivni pozadi
.noUi-background {
   background: $noui-bg-inactive;
   border: $noui-bg-border-width solid $noui-bg-border-color;
   height: $noui-bg-height;
}

.noUi-target {
   position: relative;
   direction: ltr;
}

.noUi-base {
   width: calc(100% - #{$noui-handle-size});
   height: 100%;
   position: relative;
   z-index: 1; /* Fix 401 */
}

.noUi-origin {
   position: absolute;
   right: -$noui-bg-border-width;
   top: -$noui-bg-border-width;
   left: 0;
   bottom: -$noui-bg-border-width;
   border-right: 0;
   border-left: 0;
}

.noUi-handle {
   border-radius: 50%;
   background: $body-bg;
   border: $noui-handle-width solid $noui-handle-color;
   cursor: pointer;
   display: block;
   margin-top: calc(-1 * ($noui-handle-size - $noui-bg-height) / 2);
   outline: none;
   position: absolute;
   width: $noui-handle-size;
   height: $noui-handle-size;
   z-index: 1;

   &:hover {
      background-color: $noui-handle-color;
   }
}

.noUi-handle-upper {
   top: -$noui-bg-border-width;
}

.noUi-stacking .noUi-handle {
   /* This class is applied to the lower origin when
      its values is > 50%. */
   z-index: 10;
}

.noUi-state-tap .noUi-origin {
   transition: left .3s, top .3s;
}

.noUi-state-drag * {
   cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base,
.noUi-handle {
   transform: translate3d(0, 0, 0);
}

// aktivni handle
.noUi-active {
   background-color: $noui-handle-color;
}

// aktivni pozadi
.noUi-connect {
   background: $noui-bg-active;
   transition: background 450ms;
}

[disabled].noUi-connect,
[disabled] .noUi-connect,
[disabled] .noUi-handle {
   background: #b8b8b8;
}

[disabled].noUi-target {
   opacity: .4;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
   cursor: not-allowed;
}
