.root {
  --slider-size-xs: rem(4px);
  --slider-size-sm: rem(6px);
  --slider-size-md: rem(8px);
  --slider-size-lg: rem(10px);
  --slider-size-xl: rem(12px);

  --slider-size: var(--slider-size-md);
  --slider-radius: rem(1000px);
  --slider-color: var(--mantine-primary-color-filled);

  -webkit-tap-highlight-color: transparent;
  outline: none;
  height: calc(var(--slider-size) * 2);
  padding-inline: var(--slider-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: none;
  position: relative;

  @mixin light {
    --slider-track-bg: var(--mantine-color-gray-2);
    --slider-track-disabled-bg: var(--mantine-color-gray-4);
  }

  @mixin dark {
    --slider-track-bg: var(--mantine-color-dark-4);
    --slider-track-disabled-bg: var(--mantine-color-dark-3);
  }
}

.label {
  position: absolute;
  top: rem(-36px);
  font-size: var(--mantine-font-size-xs);
  color: var(--mantine-color-white);
  padding: calc(var(--mantine-spacing-xs) / 2);
  border-radius: var(--mantine-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  touch-action: none;

  @mixin where-light {
    background-color: var(--mantine-color-gray-9);
  }

  @mixin where-dark {
    background-color: var(--mantine-color-dark-4);
  }
}

.thumb {
  position: absolute;
  display: flex;
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border: rem(4px) solid;
  transform: translate(-50%, -50%);
  color: var(--slider-color);
  top: 50%;
  cursor: pointer;
  border-radius: var(--slider-radius);
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 100ms ease,
    transform 100ms ease;
  z-index: 3;
  user-select: none;
  touch-action: none;
  outline-offset: rem(2px);
  left: var(--slider-thumb-offset);

  @mixin where-rtl {
    left: auto;
    right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
  }

  fieldset:disabled &,
  &:where([data-disabled]) {
    display: none;
  }

  &:where([data-dragging]) {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: var(--mantine-shadow-sm);
  }

  @mixin where-light {
    border-color: var(--slider-color);
    background-color: var(--mantine-color-white);
  }

  @mixin where-dark {
    border-color: var(--mantine-color-white);
    background-color: var(--slider-color);
  }
}

.trackContainer {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--slider-size) * 2);
  cursor: pointer;

  fieldset:disabled &,
  &:where([data-disabled]) {
    cursor: not-allowed;
  }
}

.track {
  position: relative;
  width: 100%;
  height: var(--slider-size);

  &:where([data-inverted]:not([data-disabled])) {
    --track-bg: var(--slider-color);
  }

  fieldset:disabled &:where([data-inverted]),
  &:where([data-inverted][data-disabled]) {
    --track-bg: var(--slider-track-disabled-bg);
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--slider-radius);
    inset-inline: calc(var(--slider-size) * -1);
    background-color: var(--track-bg, var(--slider-track-bg));
    z-index: 0;
  }
}

.bar {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  background-color: var(--slider-color);
  border-radius: var(--slider-radius);
  width: var(--slider-bar-width);
  inset-inline-start: var(--slider-bar-offset);

  &:where([data-inverted]) {
    background-color: var(--slider-track-bg);
  }

  fieldset:disabled &:where(:not([data-inverted])),
  &:where([data-disabled]:not([data-inverted])) {
    @mixin where-light {
      background-color: var(--mantine-color-gray-4);
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-3);
    }
  }
}

.markWrapper {
  position: absolute;
  inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
  top: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.mark {
  border: rem(2px) solid;
  height: var(--slider-size);
  width: var(--slider-size);
  border-radius: rem(1000px);
  transform: translateX((calc(var(--slider-size) / -2)));
  background-color: var(--mantine-color-white);
  pointer-events: none;

  @mixin where-light {
    border-color: var(--mantine-color-gray-2);
  }

  @mixin where-dark {
    border-color: var(--mantine-color-dark-4);
  }

  &:where([data-filled]) {
    border-color: var(--slider-color);

    &:where([data-disabled]) {
      @mixin where-light {
        border-color: var(--mantine-color-gray-4);
      }

      @mixin where-dark {
        border-color: var(--mantine-color-dark-3);
      }
    }
  }
}

.markLabel {
  transform: translate(
    calc(-50% + var(--slider-size) / 2),
    calc(var(--mantine-spacing-xs) / 2)
  );
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  @mixin where-light {
    color: var(--mantine-color-gray-6);
  }

  @mixin where-dark {
    color: var(--mantine-color-dark-2);
  }
}
