lucency-slider {
  --dir: right;
  --min: attr(min type(<number>), 0);
  --max: attr(max type(<number>), 100);
  --min\%: attr(min %, 0);
  --max\%: attr(max %, 1);
  --value: attr(value type(<number>));
  --thumb-offset: calc((100% - attr(thumb-thick px)) * (var(--value) - var(--min)) / (var(--max) - var(--min)));

  user-select: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  inline-size: 100%;
  block-size: 1lh;
  cursor: ew-resize;
  background:
    linear-gradient(to var(--dir), rgb(from currentColor r g b / var(--min\%)), rgb(from currentColor r g b / var(--max\%))),
    repeating-conic-gradient(var(--checker-color-2, #fff) 0 25%, var(--checker-color-1, #ddd) 0 50%) 0 0/.5lh .5Lh;
  /* chromium bug workaround: currentColor in background is not reactive; using currentColor in border makes background reactive. */
  border: 0 solid currentColor;

  &::part(range) {
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  &::part(thumb) {
    box-sizing: border-box;
    position: absolute;
    inset-block: 1px;
    inset-inline-start: var(--thumb-offset);
    inline-size: 4px;
    border-radius: 9px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #333;
  }

  &:where(:hover:not(:active):not([disabled]))::part(thumb) {
    border-color: #ddd;
  }

  &[vertical] {
    --dir: bottom;
    writing-mode: vertical-lr;
    cursor: ns-resize;
  }

  &[disabled] {
    cursor: auto;
    &::part(thumb) {
      box-shadow: 0 0 0 1px #888;
    }
  }
}