[data-scope='angle-slider'][data-part='root'] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

[data-scope='angle-slider'][data-part='label'] {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-scope='angle-slider'][data-part='control'] {
  --size: 120px;
  --thumb-size: 40px;
  --thumb-indicator-size: min(var(--thumb-size), calc(var(--size) / 2));
  --bg: hsl(220, 25.7%, 13.7%);
  --thumb-color: hsl(24, 74.7%, 49.6%);
  --accent: hsl(24, 74.7%, 40%);
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
}

[data-scope='angle-slider'][data-part='control'][data-disabled] {
  opacity: 0.4;
}

[data-scope='angle-slider'][data-part='thumb'] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% - 1.5px);
  pointer-events: none;
  outline: none;
  height: 100%;
  width: 3px;
}

[data-scope='angle-slider'][data-part='thumb']:before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: var(--thumb-indicator-size);
  background: var(--thumb-color);
  width: 3px;
}

[data-scope='angle-slider'][data-part='marker-group'] {
  position: absolute;
  inset: 1px;
  border-radius: var(--size);
  pointer-events: none;
}

[data-scope='angle-slider'][data-part='marker'] {
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  --marker-color: var(--marker-color, var(--thumb-color));

  &:before {
    content: '';
    position: absolute;
    top: calc(var(--thumb-size) / 3);
    left: 0.5px;
    width: 1px;
    height: calc(var(--thumb-size) / 1.5);
    transform: translate(-50%, -50%);
    background-color: var(--marker-color);
  }
}

[data-scope='angle-slider'][data-part='marker'][data-state='at-value'],
[data-scope='angle-slider'][data-part='marker'][data-state='under-value'] {
  --marker-color: var(--accent);
}

[data-scope='angle-slider'][data-part='marker'][data-state='over-value'] {
  --marker-color: hsl(218, 23.1%, 22.9%);
}
