:where(:root),
:where(:host) {
  --aura-surface-level: 1;
}

/* List all elements that are surfaces */
:root,
:host,
.aura-surface,
.aura-surface-solid,
vaadin-accordion-panel[theme~='filled'],
vaadin-app-layout,
vaadin-app-layout::part(navbar),
vaadin-app-layout::part(drawer),
vaadin-button,
vaadin-upload-button,
vaadin-card,
vaadin-checkbox::part(checkbox),
vaadin-details[theme~='filled'],
vaadin-dashboard-widget,
vaadin-grid,
vaadin-grid-pro,
vaadin-master-detail-layout::part(detail),
vaadin-menu-bar-button,
vaadin-message::part(attachment),
vaadin-message-input,
vaadin-radio-button::part(radio),
vaadin-range-slider,
vaadin-rich-text-editor,
vaadin-side-nav-item::part(content),
vaadin-slider,
vaadin-tab,
vaadin-tabs,
vaadin-upload,
vaadin-upload-file,
::part(input-field),
:where(
  vaadin-avatar-group,
  vaadin-combo-box,
  vaadin-confirm-dialog,
  vaadin-context-menu,
  vaadin-crud-dialog,
  vaadin-date-picker,
  vaadin-dialog,
  vaadin-login-overlay,
  vaadin-menu-bar-submenu,
  vaadin-multi-select-combo-box,
  vaadin-notification-card,
  vaadin-popover,
  vaadin-rich-text-editor-popup,
  vaadin-select,
  vaadin-slider-bubble,
  vaadin-time-picker,
  vaadin-tooltip
)::part(overlay) {
  --aura-surface-opacity: 0.5;

  /* Split signed level into positive and negative branches */
  --_up: clamp(0, var(--aura-surface-level), 4);
  --_down: clamp(0, calc(-1 * var(--aura-surface-level)), 4);

  --_u: calc(var(--_up) / 4);
  --_e-light: clamp(
    0,
    calc(4 * var(--_u) - (8 * var(--_u) * var(--_u)) + (6.5 * var(--_u) * var(--_u) * var(--_u))),
    1
  );
  --_e-dark: calc(var(--_down) / 20);

  --aura-surface-color-solid: light-dark(
    oklch(
      from var(--aura-background-color-light) clamp(0, calc(l + (1 - l) * var(--_e-light) - l * var(--_e-dark)), 1)
        clamp(
          0,
          calc(c * (1 - 0.5 * var(--_e-light) - 0.15 * var(--aura-surface-level)) * (1 - 0.35 * var(--_e-dark))),
          0.4
        )
        h
    ),
    oklch(
      from var(--aura-background-color-dark)
        calc(
          max(0.03, l) + 0.03 * var(--aura-surface-level) + max(0, 0.2 - max(0.03, l)) *
            (1.1 - 0.06 * var(--aura-surface-level))
        )
        clamp(0, c * (1 + l), 0.2) h
    )
  );

  --aura-surface-color: color-mix(
    in oklab,
    var(--aura-surface-color-solid) calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  --vaadin-background-color: var(--aura-surface-color-solid);
}

.aura-surface {
  background: var(--aura-surface-color) padding-box;
}

.aura-surface-solid {
  --aura-surface-opacity: 1;
  background: var(--aura-surface-color-solid) padding-box;
}

.aura-accent-surface {
  background: var(--aura-accent-surface) padding-box;
}

.aura-accent-surface-solid {
  background: var(--aura-accent-surface) padding-box;
  --aura-surface-opacity: 1;
}