.aura-theme-control {
  & .control {
    --control-surface: oklch(from var(--vaadin-background-color) clamp(0, (.62 - l) * 1000, 1) 0 0 / .05);
    --icon-rotate-ccw: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/><path d=\"M3 3v5h5\"/></svg>");
    --icon-lock: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M8 11V7a4 4 0 1 1 8 0v4\"/></svg>");
    --icon-lock-open: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M8 11V7a4 4 0 0 1 7.2-2.4\"/></svg>");
    display: grid;
  }

  &.span .control {
    grid-column: 1 / -1;
  }

  & .row {
    align-items: center;
    display: flex;

    & > :first-child {
      flex: 1;
      width: 100%;
      min-width: 0;
    }
  }

  & label {
    color: var(--vaadin-text-color);
    font-weight: var(--aura-font-weight-medium);
    flex: auto;
  }

  & .lock, & .reset {
    color: var(--vaadin-text-color-disabled);
    padding: var(--vaadin-padding-xs);
    flex: none;
    gap: 0;

    &:hover {
      color: var(--vaadin-text-color-secondary);
    }

    &[aria-pressed="true"] {
      color: var(--aura-accent-text-color);
    }

    &:after {
      content: "";
      background: currentColor;
      flex: none;
      width: .9lh;
      height: .9lh;
    }
  }

  & .reset:after {
    mask-image: var(--icon-rotate-ccw);
  }

  & .reset {
    display: var(--reset-button-display, inline-flex);
  }

  & .lock {
    display: var(--lock-button-display, none);
  }

  & .lock:after {
    mask-image: var(--icon-lock-open);
  }

  & .lock[aria-pressed="true"]:after {
    mask-image: var(--icon-lock);
  }

  & .segmented {
    border-radius: calc(var(--vaadin-radius-m)  + 3px);
    background: var(--control-surface);
    flex: auto;
    grid-auto-flow: column;
    padding: 3px;
    display: inline-grid;
    overflow: hidden;
  }

  & .segmented input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  & .segmented label {
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
    cursor: pointer;
    user-select: none;
    color: var(--vaadin-text-color-secondary);
    text-align: center;
    font-weight: 500;
    display: inline-block;

    &:hover {
      color: var(--vaadin-text-color);
    }

    &:not(:first-of-type) {
      box-shadow: -5px 0 0 -4px var(--vaadin-border-color-secondary);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--vaadin-focus-ring-color);
    }
  }

  & .segmented label:has(input:checked) {
    backdrop-filter: brightness(1.8) saturate(.8);
    color: var(--vaadin-text-color);
    box-shadow: var(--aura-shadow-s);
    border-radius: var(--vaadin-radius-m);

    & + label {
      box-shadow: none;
    }
  }

  & output {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 4ch;
  }

  & input[type="color"] {
    background: none;
    border: none;
    border-radius: 1rem;
    width: 2rem;
    height: 2rem;
  }

  & vaadin-select::part(input-field) {
    box-shadow: none;
    background: var(--control-surface);
    --vaadin-field-default-width: 5em;
    border: 0;
  }

  & vaadin-select-item::part(checkmark) {
    order: 1;
  }

  & select {
    border-radius: var(--vaadin-radius-m);
    font: inherit;
    font-weight: var(--aura-font-weight-medium);
    color: inherit;
    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
    background: var(--control-surface);
    border: 1px solid #0000;
  }
}