@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/screen-reader' as *;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

$track-height-offset: 1rem;
$mark-size: spacers.getSpacer(l);

.sr-only-slider {
  @include sr-only;
}

.slider {
  display: flex;
  flex-direction: column;
  row-gap: spacers.getSpacer(s);
  width: 100%;
  position: relative;
  outline: none !important;

  &__title {
    grid-column: 1 / -1;
  }

  &__content-container {
    display: flex;
    flex-direction: column;
    row-gap: spacers.getSpacer(s);
    padding: 0 spacers.getSpacer(s);
  }

  &__emoji-container,
  &__value-container {
    width: 100%;
    position: relative;
    display: flex;
  }

  &__emoji,
  &__value {
    position: relative;
    display: flex;
    justify-content: center;
    width: 0;
    transform: translateX(-50%);
  }

  &__track-wrapper {
    height: $mark-size;
    width: 100%;
    cursor: pointer;
    touch-action: none;

    &--disabled {
      cursor: default;
    }
  }

  &__track {
    padding: 0 spacers.getSpacer(s);
    border-top: 2px solid palette.$black;
    position: relative;
    top: $track-height-offset;

    &--disabled {
      border-color: palette.$neutral600;
    }

    &__step {
      position: absolute;
      left: -1px;
      width: 2px;
      height: spacers.getSpacer(xs);
      bottom: 0;
      top: (calc($track-height-offset / 2) * -1) + 0.05rem;
      background-color: palette.$black;
    }
  }

  &__marker {
    display: flex;
    justify-content: center;
    align-items: center;
    width: $mark-size;
    height: $mark-size;
    background-color: palette.$white;
    border: 0.15rem solid palette.$black;
    border-radius: 10rem;
    position: absolute;
    z-index: 9;
    outline: none;
    cursor: pointer;

    &--focused {
      outline: 0.15rem solid palette.$black;
    }

    &--focused#{&}--selected {
      &::after {
        background-color: palette.$blueberry700;
      }
    }

    &--selected {
      &::after {
        content: '';
        width: 1.25rem;
        height: 1.25rem;
        border: 0.1rem solid palette.$black;
        border-radius: 10rem;
        background-color: palette.$blueberry600;

        :hover > & {
          background-color: palette.$blueberry700;
        }
      }
    }

    &--invalid {
      border-color: var(--color-notification-border-error);
    }

    &--disabled {
      border-color: palette.$neutral500;
      cursor: default;

      &::after {
        border-color: palette.$neutral500;
        background-color: palette.$neutral200;

        :hover > & {
          background-color: palette.$neutral200;
        }
      }
    }
  }

  &__options {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
  }
}