@use './variables' as vars;

:root {
  --slider-fill-color: var(--color-primary-500);
}

.mat-mdc-slider {
  --mat-slider-handle-shape: 50%;
}

.mdc-slider {
  --mat-slider-active-track-height: 3px;
  --mat-slider-inactive-track-height: 3px;
  --mat-slider-inactive-track-color: transparent;
  --mat-slider-focus-handle-color: var(--slider-fill-color);
  --mat-slider-active-track-color: var(--slider-fill-color);
  --mat-slider-handle-color: var(--slider-fill-color);
  --mat-slider-handle-width: 16px;
  --mat-slider-handle-height: 16px;
  --mat-slider-inactive-track-shape: 0;
  --mat-slider-active-track-shape: 0;
  height: 3px !important;

  .mdc-slider {

    &__thumb {
      height: 3px !important;
    }

    &__input {
      height: 3px !important;
    }
  }

  &__thumb {
    &--with-indicator {
      & > .mdc-slider__thumb-knob {
        &::after {
          width: 8px;
          height: 8px;
        }
      }
    }
  }

  &__thumb-knob {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: white;
    }
  }

  &__track {
    position: relative;
    height: 3px !important;
    top: 0 !important;
    transform: none !important;

    &::before {
      content: '';
      position: absolute;
      mask-image: url(#{vars.$ui-kit-assets-dir}/svg/input-corner-left.svg);
      mask-position: 0 0;
      mask-repeat: no-repeat;
      background-color: var(--slider-fill-color);
      height: 3px;
      width: 9px;
      transform: translateX(-8px);
      transition: none;
    }
    .mdc-slider__track--active_fill {
      border: var(--mat-slider-active-track-height, 6px) solid var(--mat-slider-active-track-color) !important;
      height: 3px !important;
    }
  }
}