@use '../../sass/abstracts/variables' as *;

#{$object-prefix}range-slider {
  position: relative;
  height: 2.75rem;
  margin: 0.5rem 0;
  --progressLeft: 0%;
  --progressRight: 0%;
  --trackHeight: 2px;
  --thumbRadius: 1rem;

  /* style the input element with type "range" */
  input[type='range'] {
    position: absolute;
    width: calc(100% - var(--thumbRadius));
    appearance: none;
    background: none;
    border-radius: 999px;
    height: var(--trackHeight);
    pointer-events: none;

    &[name='max'] {
      left: var(--thumbRadius);
    }

    &::-webkit-slider-runnable-track {
      appearance: none;
      height: var(--trackHeight);
      border-radius: 999px;
    }

    &::before {
      content: '';
      display: none;
      position: absolute;
      width: var(--ProgressPercent, 100%);
      height: 100%;
      background: $dark-blue-50;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      position: relative;
      width: var(--thumbRadius);
      height: var(--thumbRadius);
      margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
      background: $white;
      border: 5px solid $dark-blue-50;
      border-radius: 999px;
      pointer-events: all;
      appearance: none;
    }

    &::-moz-range-thumb {
      position: relative;
      box-sizing: border-box;
      width: var(--thumbRadius);
      height: var(--thumbRadius);
      margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
      background: $white;
      border: 5px solid $dark-blue-50;
      border-radius: 999px;
      pointer-events: all;
      appearance: none;
    }
  }

  &__minmax-indicator {
    position: absolute;
    height: var(--trackHeight);
    pointer-events: none;
    left: 0;
    right: 0;
    border-bottom: 2px solid $sodra-black-10;

    &::before {
      content: '';
      position: absolute;
      background: $dark-blue-50;
      height: var(--trackHeight);
      left: var(--progressLeft);
      right: var(--progressRight);
    }
  }

  &__minmax {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: auto;
    height: 2rem;
    margin: 0 15px;
    &-placeholder {
      width: 1px;
      position: absolute;
      overflow: visible;

      &:nth-child(1) {
        left: var(--progressLeft);
        margin-left: -20px;
      }

      &:nth-child(2) {
        right: var(--progressRight);
        margin-right: 4px;
      }

      input {
        text-align: center;
        width: 40px;
      }
    }
  }
  &--single {
    #{$object-prefix}range-slider {
      &__minmax {
        margin-right: 0;
      }
    }

    input[type='range'] {
      width: 100%;
    }
  }

  &--white {
    #{$object-prefix}range-slider {
      &__minmax-indicator {
        border-bottom: 2px solid $white;
      }
    }
  }
}