.slider > * {
  width: 100%;
}

[data-scope="slider"][data-part="root"] {
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

[data-scope="slider"][data-part="root"][data-orientation="vertical"] {
  height: 240px;
}

[data-scope="slider"][data-part="control"] {
  --slider-thumb-size: 20px;
  --slider-track-height: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

[data-scope="slider"][data-part="control"][data-orientation="horizontal"] {
  height: var(--slider-thumb-size);
}

[data-scope="slider"][data-part="control"][data-orientation="vertical"] {
  width: var(--slider-thumb-size);
}

[data-scope="slider"][data-part="thumb"] {
  all: unset;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 999px;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 10px;
}

[data-scope="slider"][data-part="thumb"]:focus-visible {
  box-shadow: rgb(0 0 0 / 22%) 0px 0px 0px 5px;
}

[data-scope="slider"][data-part="thumb"]:hover:not([data-disabled]) {
  background-color: rgb(245, 242, 255);
}

[data-scope="slider"][data-part="thumb"][data-disabled] {
  background-color: lightgray;
}

[data-scope="slider"] .control-area {
  margin-top: 12px;
  display: flex;
}

.slider [data-orientation="horizontal"] .control-area {
  flex-direction: column;
  width: 100%;
}

.slider [data-orientation="vertical"] .control-area {
  flex-direction: row;
  height: 100%;
}

[data-scope="slider"][data-part="track"] {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
}

[data-scope="slider"][data-part="track"][data-orientation="horizontal"] {
  height: var(--slider-track-height);
  width: 100%;
}

[data-scope="slider"][data-part="track"][data-orientation="vertical"] {
  height: 100%;
  width: var(--slider-track-height);
}

[data-scope="slider"][data-part="range"] {
  background: magenta;
  border-radius: inherit;
}

[data-scope="slider"][data-part="range"][data-disabled] {
  background: rgba(0, 0, 0, 0.4);
}

[data-scope="slider"][data-part="range"][data-orientation="horizontal"] {
  height: 100%;
}

[data-scope="slider"][data-part="range"][data-orientation="vertical"] {
  width: 100%;
}

[data-scope="slider"][data-part="value-text"] {
  margin-inline-start: 12px;
}

[data-scope="slider"][data-part="marker-group"][data-orientation="vertical"] {
  height: 100%;
}

[data-scope="slider"][data-part="marker"] {
  color: lightgray;
}

[data-scope="slider"][data-part="marker"]:is([data-state="under-value"], [data-state="at-value"]) {
  color: red;
}

[data-scope="slider"][data-part="dragging-indicator"] {
  background: magenta;
  border-radius: 4px;
  padding: 2px 4px;
  color: white;
  &[data-orientation="horizontal"] {
    top: calc(var(--slider-thumb-size) + 8px);
  }

  &[data-orientation="vertical"] {
    left: calc(var(--slider-thumb-size) + 8px);
  }
}
