[data-c42-slider] {
  --c42-slider-start-percent: 0%;
  --c42-slider-end-percent: 0%;
  display: flex;
  align-items: center;
  color: var(--c42-color-fg, #111827);
}

[data-c42-slider][data-orientation='horizontal'] {
  inline-size: 100%;
  block-size: 1.25rem;
}

[data-c42-slider][data-orientation='vertical'] {
  block-size: 12rem;
  inline-size: 1.25rem;
  justify-content: center;
}

[data-c42-slider-track] {
  position: relative;
  background: var(--c42-color-border, #e5e7eb);
  border-radius: 9999px;
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-track] {
  inline-size: 100%;
  block-size: 0.375rem;
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-track] {
  block-size: 100%;
  inline-size: 0.375rem;
}

[data-c42-slider-range] {
  background: var(--c42-color-accent, #4f46e5);
  border-radius: inherit;
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-range] {
  position: absolute;
  inset-inline-start: var(--c42-slider-start-percent);
  inline-size: calc(var(--c42-slider-end-percent) - var(--c42-slider-start-percent));
  block-size: 100%;
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-range] {
  position: absolute;
  inset-block-end: var(--c42-slider-start-percent);
  block-size: calc(var(--c42-slider-end-percent) - var(--c42-slider-start-percent));
  inline-size: 100%;
}

[data-c42-slider-thumb] {
  position: absolute;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--c42-color-bg, #ffffff);
  border: 2px solid var(--c42-color-accent, #4f46e5);
  border-radius: 50%;
  box-shadow: var(--c42-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
  cursor: grab;
  touch-action: none;
}

/* Horizontal thumb positioning */
[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb] {
  inset-block-start: 50%;
  translate: -50% -50%;
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb][data-thumb='start'] {
  inset-inline-start: var(--c42-slider-start-percent);
}

[data-c42-slider][data-orientation='horizontal'] [data-c42-slider-thumb]:not([data-thumb='start']) {
  inset-inline-start: var(--c42-slider-end-percent);
}

/* Vertical thumb positioning */
[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb] {
  inset-inline-start: 50%;
  translate: -50% 50%;
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb][data-thumb='start'] {
  inset-block-end: var(--c42-slider-start-percent);
}

[data-c42-slider][data-orientation='vertical'] [data-c42-slider-thumb]:not([data-thumb='start']) {
  inset-block-end: var(--c42-slider-end-percent);
}

[data-c42-slider-thumb]:focus-visible {
  outline: 2px solid var(--c42-color-accent, #4f46e5);
  outline-offset: 2px;
}

[data-c42-slider-thumb]:active {
  cursor: grabbing;
}