.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;
}

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

.aura-theme-control .row {
  align-items: center;
  display: flex;
}

.aura-theme-control .row > :first-child {
  flex: 1;
  width: 100%;
  min-width: 0;
}

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

.aura-theme-control .lock, .aura-theme-control .reset {
  color: var(--vaadin-text-color-disabled);
  flex: none;
  gap: 0;
  margin-block: 2px;
  padding: 3px;
}

:is(.aura-theme-control .lock, .aura-theme-control .reset):hover {
  color: var(--vaadin-text-color-secondary);
}

:is(.aura-theme-control .lock, .aura-theme-control .reset)[aria-pressed="true"] {
  background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  color: var(--aura-accent-text-color);
}

:is(.aura-theme-control .lock, .aura-theme-control .reset):after {
  content: "";
  background: currentColor;
  flex: none;
  width: .9lh;
  height: .9lh;
}

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

.aura-theme-control .reset {
  display: var(--reset-button-display, inline-flex);
}

.aura-theme-control .lock {
  display: var(--lock-button-display, none);
}

.aura-theme-control .lock:after {
  mask-image: var(--icon-lock-open);
}

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

.aura-theme-control .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;
}

.aura-theme-control .segmented input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

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

.aura-theme-control .segmented label:hover {
  color: var(--vaadin-text-color);
}

.aura-theme-control .segmented label:not(:first-of-type) {
  box-shadow: -5px 0 0 -4px var(--vaadin-border-color-secondary);
}

.aura-theme-control .segmented label:has(:focus-visible) {
  outline: 2px solid var(--vaadin-focus-ring-color);
}

.aura-theme-control .segmented label:has(input:checked) {
  color: var(--vaadin-text-color);
  box-shadow: var(--aura-shadow-s);
  border-radius: var(--vaadin-radius-m);
  background: light-dark(#fff, #fff3);
}

.aura-theme-control .segmented label:has(input:checked) + label {
  box-shadow: none;
}

.aura-theme-control output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

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

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

.aura-theme-control vaadin-select-item::part(checkmark) {
  order: 1;
}

.aura-theme-control 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;
}

aura-preset-thumbnail[style] {
  aspect-ratio: 16 / 10;
  background: var(--aura-app-background);
  gap: min(5px, var(--aura-app-layout-inset));
  padding: min(5px, var(--aura-app-layout-inset));
  box-sizing: border-box;
  color-scheme: light;
  border-radius: 5px;
  grid-area: 1 / 1;
  display: flex;
  overflow: hidden;
}

aura-preset-thumbnail[scheme="dark"] {
  color-scheme: dark;
}

aura-preset-thumbnail[overlay] {
  color-scheme: dark;
  clip-path: polygon(90% -2%, 102% -2%, 102% 102%, -2% 102%, 10% 102%);
}

aura-preset-thumbnail, aura-preset-thumbnail .shape-content {
  --_bg-alt: light-dark(oklch(from var(--aura-background-color-light) calc(l + c) min(c, c * 2 - l / 20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)), oklch(from var(--aura-background-color-dark) calc(l + c) min(c, c * 2 - l / 20) calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)));
  --_bg-accent: radial-gradient(circle at 0% 0%, light-dark(oklch(from var(--aura-background-color-light) min(1, l + c * 3) min(c, c * 3) h), oklch(from var(--aura-background-color-dark) min(1, l + c) clamp(0, c * 1.5, .4) h)), transparent 30%);
  --aura-background-color: light-dark(var(--aura-background-color-light), var(--aura-background-color-dark));
  --aura-app-background: var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background-color) 33%, var(--_bg-alt)) var(--aura-background-color);
}

aura-preset-thumbnail .shape {
  border-radius: round(var(--aura-base-radius) * 1px / 1.5, 1px);
}

aura-preset-thumbnail .shape-nav-items {
  width: calc(var(--aura-base-size) * 1px);
  padding: round(var(--aura-base-size) * .25px, 1px);
  align-self: start;
  gap: round(var(--aura-base-size) * .25px, 1px);
  flex-direction: column;
  display: flex;
}

aura-preset-thumbnail .shape-nav-items:before, aura-preset-thumbnail .shape-nav-items:after {
  content: "";
  width: round(var(--aura-base-font-size) * .5px, 1px);
  height: round(var(--aura-base-font-size) * .3px, 1px);
  border-radius: inherit;
  background: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

aura-preset-thumbnail .shape-nav-items:after {
  width: 100%;
  height: round(var(--aura-base-font-size) * .2px, 1px);
  background: var(--aura-neutral);
  opacity: calc(.2 + .1 * var(--aura-contrast-level));
  box-shadow: 0 round(var(--aura-base-size) * .5px, 1px) 0 0 var(--aura-neutral), 0 round(var(--aura-base-size) * 1px, 1px) 0 0 var(--aura-neutral);
}

aura-preset-thumbnail .shape-content {
  color-scheme: var(--aura-content-color-scheme);
  border-radius: clamp(0px, var(--aura-app-layout-inset) * 1000, var(--aura-base-radius) * 1px);
  align-self: stretch;
  gap: round(var(--aura-base-size) * .25px, 1px);
  padding: round(var(--aura-base-size) * .25px, 1px);
  outline: 1px solid color-mix(in srgb, var(--aura-neutral) calc(7% + 3% * var(--aura-contrast-level)), transparent);
  background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
  flex-direction: column;
  flex: 1;
  display: flex;
}

aura-preset-thumbnail[overlay] .shape-content {
  color-scheme: dark;
}

aura-preset-thumbnail .shape-text {
  gap: round(var(--aura-base-size) * 1px / 6, 1px);
  flex-direction: column;
  display: flex;
}

aura-preset-thumbnail .shape-text:before, aura-preset-thumbnail .shape-text:after {
  content: "";
  width: round(var(--aura-base-size) * 1px, 1px);
  height: round(var(--aura-base-font-size) * .25px, 1px);
  border-radius: inherit;
  background: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  opacity: calc(.3 + .1 * var(--aura-contrast-level));
}

aura-preset-thumbnail .shape-text:after {
  width: 75%;
  height: round(var(--aura-base-font-size) * .15px, 1px);
  background: var(--aura-neutral);
  opacity: calc(.1 + .1 * var(--aura-contrast-level));
}

aura-preset-thumbnail .shape-cards {
  gap: round(var(--aura-base-size) * 1px / 8, 1px);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

aura-preset-thumbnail .shape-card {
  height: round(var(--aura-base-size) * 1.25px, 1px);
  background: var(--aura-surface-color-solid) padding-box;
  --aura-surface-level: 1;
  border: 1px solid color-mix(in srgb, var(--aura-neutral) calc(7% + 3% * var(--aura-contrast-level)), transparent);
}

aura-preset-thumbnail .shape-card:before {
  content: "";
  width: 30%;
  height: round(var(--aura-base-size) * .2px, 1px);
  background: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  margin: round(var(--aura-base-size) * 1px / 8, 1px);
  opacity: calc(.3 + .1 * var(--aura-contrast-level));
  display: block;
}

aura-preset-thumbnail .shape-btn {
  width: calc(var(--aura-base-size) * 1px);
  height: round(var(--aura-base-size) * .5px, 1px);
  background: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
  justify-content: center;
  align-items: center;
  display: flex;
}

aura-preset-thumbnail .shape-btn:before {
  content: "";
  background: var(--aura-accent-contrast-color);
  border-radius: inherit;
  width: 50%;
  height: 25%;
}