html .ngx-slider{
  margin: 22px 0 0;
  height: auto;
  &.with-legend{
    margin-bottom: 40px;
  }
  .ngx-slider-bar{
    background: var(--color-surface-alt-nested);
    height: 2px;
  }
  .ngx-slider-tick {
    background: var(--color-surface-alt-nested);
    margin-left: 6px;
    height: 6px;
    width: 6px;
    top: 1px;
    &:hover{
      background: var(--color-surface-alt-hover);
    }
    &:active{
      background: var(--color-surface-alt-press);
    }
    &.ngx-slider-selected{
      background: var(--color-surface-brand-idle);
      &:hover{
        background: var(--color-surface-brand-hover);
      }
      &:active{
        background: var(--color-surface-brand-press);
      }
    }
  }
  .ngx-slider-selection{
    background: var(--color-surface-brand-idle);
  }
  .ngx-slider-pointer{
    height: 16px;
    width: 16px;
    top: -8px;
    margin-left: 0;
    background-color: var(--color-surface-brand-idle);
    &:hover{
      background-color: var(--color-surface-brand-hover);
    }
    &:active{
      background-color: var(--color-surface-brand-press);
    }
  }
  .ngx-slider-pointer:after{
    height: 6px;
    width: 6px;
    background: var(--color-on-surface-alt-primary) !important;
    border: none;
    left: 5px;
    top: 5px;
  }
  .ngx-slider-tick-legend{
    font-size: var(--font-size-caption);
    max-width: 80px;
    top: 12px;
  }
  .ngx-slider-tick-value{
    font-size: var(--font-size-s);
    top: -24px;
  }
  .ngx-slider-bubble{
    font-size: var(--font-size-s);
  }
  .ngx-slider-tick:first-of-type{
    margin-left: 0;
    .ngx-slider-tick-legend{
      transform: translate(-2px);
    }
  }
  .ngx-slider-tick:last-of-type{
    margin-left: 10px;
    .ngx-slider-tick-legend{
      transform: translate(-100%);
      text-align: right;
    }
  }
}

.touch-slider.ngx-slider{
  margin: 35px 0 20px;
  &.with-legend{
    margin-bottom: 50px;
  }
  .ngx-slider-bar{
    background: var(--color-surface-alt-disabled);
    height: 24px;
    border-radius: var(--border-radius-round);
  }
  .ngx-slider-tick{
    top: 12px;
  }
  .ngx-slider-tick-value{
    top: -28px;
  }
  .ngx-slider-tick-legend {
    top: 16px;
  }
  .ngx-slider-pointer{
    height: 24px;
    width: 24px;
    top: 0;
  }
  .ngx-slider-pointer:after{
    height: 12px;
    width: 12px;
    border-radius: var(--border-radius-round);
    top: 6px;
    left: 6px;
  }
  .ngx-slider-tick:first-of-type{
    margin-left: 10px;
    .ngx-slider-tick-legend{
      transform: translate(-2px);
    }
  }
  .ngx-slider-selection{
    background: var(--color-surface-brand-idle);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .ngx-slider-tick.ngx-slider-selected{
    background: var(--color-surface-neutral-idle);
    &:hover{
      background: var(--color-surface-neutral-hover);
    }
  }
  .ngx-slider-bubble{
    bottom: 4px;
  }
  &.range-slider{
    .ngx-slider-selection{
      border-radius: 0;
    }
  }
}
html .ngx-slider[disabled]{
  .ngx-slider-pointer{
    background-color: var(--color-surface-brand-disabled);
  }
  .ngx-slider-tick{
      background-color: var(--color-on-surface-neutral-disabled);
    }
  .ngx-slider-bubble,
  .ngx-slider-tick-legend,
  .ngx-slider-inner-tooltip{
    color: var(--color-on-surface-neutral-disabled)
  }
  .ngx-slider-bar{
    background: var(--color-on-surface-neutral-disabled);
  }
  &.touch-slider{
    .ngx-slider-bar{
      background: var(--color-surface-alt-disabled);
    }
    .ngx-slider-selection{
      background-color: var(--color-on-surface-brand-disabled)
    }
  }
}

/*
html{
  .ng5-slider,
  .ngx-slider{
    .ng5-slider-bar,
    .ngx-slider-bar{
      background: var(--color-on-surface-neutral);
    }
    .ng5-slider-selection,
    .ngx-slider-selection{
      background: var(--color-surface-brand-default);
    }
    .ng5-slider-tick-legend,
    .ngx-slider-tick-legend{
      font-size: var(--font-sizes-small);
      line-height: 1.2;
    }
    .ng5-slider-pointer,
    .ngx-slider-pointer
    {
      background-color: var(--color-surface-brand-default);
      height: 18px;
      width: 18px;
      top: -8px;
      border: 2px solid transparent;
      &:after{
        display: none;
      }
      &.ng5-slider-active,
      &.ngx-slider-active{
        border: 2px solid var(--color-on-surface-default);
      }
    }
    .ng5-slider-bubble,
    .ngx-slider-bubble{
      bottom: 9px;
      font-weight: var(--font-weights-400);
    }
    .ng5-slider-tick,
    .ngx-slider-tick{
      background: var(--color-on-surface-neutral);
      height: 8px;
      width: 8px;
      top: 1px;
      margin-left: 5px;
    }
    .ng5-slider-ticks,
    .ngx-slider-ticks{
      .ng5-slider-tick:first-of-type,
      .ngx-slider-tick:first-of-type{
        margin-left: 0;
      }
      .ng5-slider-tick:last-of-type,
      .ngx-slider-tick:last-of-type{
        margin-left: 10px;
      }
    }
  }
  .ng5-slider[disabled],
  .ngx-slider[disabled]{
    .ng5-slider-bar,
    .ngx-slider-bar{
      background: var(--color-disabled-nested);
    }
    .ng5-slider-pointer,
    .ngx-slider-pointer{
      background: var(--color-disabled-nested);
    }
    .ng5-slider-bubble,
    .ngx-slider-bubble{
      color: var(--color-disabled-nested);
    }
  }
}

.slider-field{
  label{
    color: var(--color-on-surface-brand);
    font-size: var(--font-sizes-small);
    font-weight: var(--font-weights-400);
    margin-bottom: 0;
  }
  mat-error{
    opacity: 0;
    font-size: var(--font-sizes-small);
    transition: opacity 200ms ease-in-out;
  }
  &.error{
    label{
      color: var(--color-on-surface-danger);
    }
    .ng5-slider-pointer{
      background: var(--color-surface-danger-default) !important;
    }
    mat-error{
      opacity: 1;
    }
  }
  &.disabled{
    label{
      color: var(--color-disabled-nested);
    }
  }
}

html{
  .touch-slider.ngx-slider{
    height: 48px;
    margin: 0 0 32px;
    &.with-legend{
      .ngx-slider-inner-tooltip{
        display: none !important;
      }
    }
    .ngx-slider-bar{
      height: 48px;
      background-color: var(--color-surface-default-default);
      border-radius: var(--border-radius-round);
    }
    .ngx-slider-pointer{
      height: 48px;
      width: 48px;
      border-radius: 50%;
      top: 0;
      border: 8px solid var(--color-surface-default-default) !important;
    }
    .ngx-slider-pointer:after{
      content: '';
      width: 12px;
      height: 12px;
      position: absolute;
      top: 10px;
      left: 10px;
      border-radius: 50%;
      background: var(--color-surface-default-default);
      display: block !important;
    }
    .ngx-slider-bar-wrapper{
      margin-top: 0;
      padding-top: 0;
    }
    .ngx-slider-ticks{
      left: 20px;
    }
    .ngx-slider-tick{
      top: 24px;
      height: 4px;
      width: 4px;
      margin: 0 !important;
      &:hover{
        border: 18px solid var(--color-surface-default-hover);
        top: 10px;
        margin-left: -16px !important;
        .ngx-slider-inner-tooltip{
          top: 72px;
        }
        .ngx-slider-tick-legend{
          margin-top: 6px;
        }
      }
    }
    .ngx-slider-inner-tooltip{
      position: absolute;
      top: 90px;
      color: var(--color-on-surface-default);
      font-size: var(--font-sizes-xs);
      margin-left: -6px;
    }
    .ngx-slider-tick-legend{
      color: var(--color-on-surface-default);
      font-size: var(--font-sizes-xs);
      margin-top: 10px;
      max-width: initial;
      width: initial;
    }
  }
}


html .ng5-slider[disabled] {
  .ng5-slider-bar,
  .ng5-slider-pointer,
  .ng5-slider-tick {
    background: var(--color-disabled-nested) !important;
  }

  .ng5-slider-tick-legend {
    color: var(--color-disabled-nested) !important;
  }
}

html {
  .ng5-slider .ng5-slider-tick-legend {
    font-size: var(--font-sizes-xs);
    width: 80px;
  }
}

.ng5-slider .ng5-slider-tick.ng5-slider-selected {
  background: var(--color-surface-brand-default) !important;
}

html .touch-slider.ngx-slider .ngx-slider-tick {
  top: 7px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  left: -20px;
  background: transparent;
}
html .touch-slider.ngx-slider .ngx-slider-tick:after {
  height: 12px;
  width: 12px;
  position: absolute;
  content: "";
  background: var(--color-surface-neutral-default);
  border-radius: var(--border-radius-round);
  top: 14px;
  left: 14px;
}
html .touch-slider.ngx-slider .ngx-slider-tick-legend {
  margin-top: 36px !important;
}
html .touch-slider.ngx-slider .ngx-slider-tick:hover {
  top: 7px !important;
  margin-left: initial !important;
  &:after {
    top: -4px !important;
    left: -4px !important;
  }
}

html .touch-slider.ngx-slider .ngx-slider-tick:hover .ngx-slider-tick-legend {
  margin-top: 18px !important;
}

html .touch-slider.ngx-slider .ngx-slider-bar{
  background-color: var(--color-surface-default-nested) !important;
}
html .touch-slider.ngx-slider .ngx-slider-pointer{
  border: 8px solid var(--color-surface-brand-default) !important;
}

html .touch-slider.ngx-slider .ngx-slider-bar.ngx-slider-selection{
  background-color: var(--color-swatches-primary-brand-100) !important;
  margin-left: -18px;
  width: calc(100% + 36px);
  height: 36px;
  margin-top: 6px;
}
html .touch-slider.ngx-slider .ngx-slider-bar{
}
html .touch-slider.ngx-slider .ngx-slider-tick-legend{
  width: 100%;
}
html .touch-slider.ngx-slider .ngx-slider-pointer{
  width: 36px;
  height: 36px;
  margin-top: 6px;
}
html .touch-slider.ngx-slider .ngx-slider-pointer:after{
  top: 4px;
  left: 4px;
}

html .touch-slider.ngx-slider .ngx-slider-tick:hover .ngx-slider-tick-legend {
  margin-top: 18px !important;
}

html .touch-slider.ngx-slider .ngx-slider-tick {
  top: 7px;
  height: 40px;
  width: 40px;
  margin: 0 !important;
  left: -20px;
  background: transparent;
}
html .touch-slider.ngx-slider .ngx-slider-tick:after {
  height: 12px;
  width: 12px;
  position: absolute;
  content: "";
  background: var(--color-surface-neutral-default);
  border-radius: var(--border-radius-round);
  top: 14px;
  left: 14px;
}
html .touch-slider.ngx-slider .ngx-slider-tick-legend {
  margin-top: 36px !important;
  min-width: 50px;
}
!*html .touch-slider.ngx-slider .ngx-slider-tick:hover {
  top: 7px !important;
  margin-left: initial !important;
  &:after {
    top: -4px !important;
    left: -4px !important;
  }
}*!
.ng5-slider .ng5-slider-tick.ng5-slider-selected {
  background: var(--color-surface-brand-default) !important;
}
*/