@import '../../mixins/box-sizing';

tds-slider {
  @include tds-box-sizing;

  width: 100%;

  input[type='range'].tds-slider-native-element {
    display: none;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.tds-slider-wrapper {
  width: 100%;

  &.read-only {
    pointer-events: none;
  }
}

.tds-slider-wrapper:focus-within {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: var(--tds-spacing-element-4);
}

.tds-slider {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  padding-top: 65px;

  .tds-slider-inner {
    width: 100%;
    height: 20px;
    position: relative;
  }

  .tds-slider__controls {
    position: relative;
    top: -25px;

    .tds-slider__control {
      cursor: pointer;

      &.tds-slider__control-minus {
        padding: 18px 18px 18px 0;
      }

      &.tds-slider__control-plus {
        padding: 18px 0 18px 18px;
      }
    }
  }

  .tds-slider__input-values {
    position: relative;
    top: -25px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    .tds-slider__input-value {
      user-select: none;
      padding: 18px;
      color: var(--tds-grey-700);

      //@include type-style('detail-02');
      font: var(--tds-detail-02);
      letter-spacing: var(--tds-detail-02-ls);

      &.min-value {
        padding-left: 0;
      }
    }

    .tds-slider__input-field-wrapper {
      background-color: var(--tds-slider-inputfield-background);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 4px 0 0;

      input.tds-slider__input-field {
        // @include type-style('detail-02');
        font: var(--tds-detail-02);
        letter-spacing: var(--tds-detail-02-ls);
        color: var(--tds-slider-input-inputfield-color);
        border: 0;
        background-color: transparent;
        text-align: center;
        padding: 12px;
        box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
        border-radius: 4px 4px 0 0;

        &:hover {
          box-shadow: inset 0 -1px 0 var(--tds-grey-600);
        }

        &:focus {
          box-shadow: inset 0 -2px 0 var(--tds-blue-400);
          outline: 0;
        }
      }
    }
  }

  label {
    // @include type-style('detail-05');
    font: var(--tds-detail-05);
    letter-spacing: var(--tds-detail-05-ls);
    user-select: none;
    position: absolute;
    color: var(--tds-slider-label-color);
    padding-bottom: 16px;
    transform: translateY(-100%);

    &.offset {
      padding-bottom: 34px;
    }
  }

  .tds-slider__value {
    // @include type-style('detail-01');
    font: var(--tds-detail-01);
    letter-spacing: var(--tds-detail-01-ls);
    user-select: none;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    transform: translate(-50%, -100%);
    top: -24px;
    background-color: var(--tds-slider-value-tooltip-background);
    color: var(--tds-slider-value-tooltip-color);

    svg {
      color: var(--tds-slider-value-tooltip-background);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 34px;
    }
  }

  .tds-slider__thumb {
    position: absolute;

    .tds-slider__thumb-inner {
      width: 20px;
      height: 20px;
      border-radius: 100%;
      background-color: var(--tds-slider-thumb-color);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;

      &::before {
        content: ' ';
        display: none;
        width: 48px;
        height: 48px;
        background-color: var(--tds-slider-thumb-color);
        position: absolute;
        border-radius: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &:hover {
        &::before {
          display: block;
          opacity: 0.08;
        }
      }

      &.pressed {
        width: 24px;
        height: 24px;

        &::before {
          display: block;
          opacity: 0.16 !important;
        }
      }
    }
  }

  .tds-slider__value-dividers-wrapper {
    position: relative;
    width: 100%;
    pointer-events: none;
  }

  .tds-slider__value-dividers {
    pointer-events: none;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .tds-slider__value-divider {
      transform: translateY(-50%);
      height: 16px;
      background-color: var(--tds-slider-divider-color);
      color: var(--tds-slider-divider-values-color);
      width: 1px;

      span {
        display: block;
        user-select: none;
        color: var(-tds-grey-700);

        // @include type-style('detail-05');
        font: var(--tds-detail-05);
        letter-spacing: var(--tds-detail-05-ls);
        position: relative;
        top: -7px;
        left: 50%;
        transform: translate(-50%, -100%);
        width: 50px;
        text-align: center;
      }
    }
  }

  .tds-slider__track {
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: var(--tds-slider-track-color);
    position: relative;
    cursor: pointer;

    // invisible clickable area
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      bottom: -10px;
      cursor: pointer;
      z-index: 0;
    }

    &:focus {
      outline: 0;

      .tds-slider__thumb {
        .tds-slider__thumb-inner {
          width: 24px;
          height: 24px;

          &::before {
            display: block;
            opacity: 0.08;
          }
        }
      }
    }

    .tds-slider__track-fill {
      background-color: var(--tds-slider-track-fill-color);
      border-radius: 2px;
      height: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }

    .tds-slider__thumb {
      z-index: 1; // Ensure thumb stays above the clickable area
    }
  }

  &.disabled {
    // pointer-events: none;
    cursor: not-allowed;

    > * {
      pointer-events: none;
    }

    label {
      color: var(--tds-slider-disabled);
    }

    .tds-slider__controls {
      .tds-slider__control {
        cursor: default;

        &.tds-slider__control-minus,
        &.tds-slider__control-plus {
          svg {
            fill: var(--tds-slider-disabled);
          }
        }
      }
    }

    .tds-slider__input-values {
      .tds-slider__input-value {
        color: var(--tds-slider-disabled);
      }

      .tds-slider__input-field-wrapper {
        pointer-events: none;

        input.tds-slider__input-field {
          color: var(--tds-slider-disabled);
          pointer-events: none;
        }
      }
    }

    .tds-slider__value {
      display: none;
    }

    .tds-slider__track {
      cursor: not-allowed;

      .tds-slider__track-fill {
        background-color: var(--tds-slider-disabled);
      }
    }

    .tds-slider__value-dividers {
      .tds-slider__value-divider {
        span {
          color: var(--tds-slider-disabled);
        }
      }
    }

    .tds-slider__thumb {
      pointer-events: none;

      .tds-slider__thumb-inner {
        background-color: var(--tds-slider-disabled);
        cursor: default;
      }
    }
  }

  &.tds-slider-small {
    .tds-slider__thumb {
      .tds-slider__thumb-inner {
        width: 16px;
        height: 16px;

        &::before {
          width: 40px;
          height: 40px;
        }

        &.pressed {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}

.tds-slider {
  .tds-slider__controls {
    .tds-slider__control {
      cursor: default;

      &.tds-slider__control-minus,
      &.tds-slider__control-plus {
        tds-icon {
          color: var(--tds-slider-controls-color);
        }
      }
    }
  }

  &.disabled {
    .tds-slider__controls {
      .tds-slider__control {
        cursor: default;

        &.tds-slider__control-minus,
        &.tds-slider__control-plus {
          tds-icon {
            color: var(--tds-slider-disabled);
          }
        }
      }
    }
  }
}