:where(:root, :host) {
  --aura-contrast: 1;
  --aura-accent-light: #1858d8;
  --aura-accent-dark: #3670e2;
  --_color-base: light-dark(oklch(from var(--aura-background-light) .1 calc(c / 2 + c * (1 - c)) h), oklch(from var(--aura-background-dark) 1 c h));
  --aura-text-light: color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent);
  --aura-text-dark: color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent);
  --vaadin-text-color: light-dark(var(--aura-text-light), var(--aura-text-dark));
  --vaadin-text-color-secondary: light-dark(color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent), color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent));
  --vaadin-text-color-disabled: color-mix(in srgb, var(--_color-base) calc(30% + 10% * var(--aura-contrast)), transparent);
  --_border-color-base: light-dark(oklch(from var(--aura-background-light) .1 c h), oklch(from var(--aura-background-dark) .85 c h));
  --vaadin-border-color: color-mix(in srgb, var(--_border-color-base) calc(14% + 6% * var(--aura-contrast)), transparent);
  --vaadin-border-color-secondary: light-dark(color-mix(in srgb, var(--_border-color-base) max(5%, 5% + 3% * var(--aura-contrast)), transparent), color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent));
  --aura-background-light: oklch(95% .005 260);
  --aura-background-dark: oklch(20% .01 260);
  --aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
  --_bg-alt: oklch(from var(--aura-background) calc(l + c) min(c, c * 2 - l / 20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4));
  --_bg-accent: radial-gradient(circle at 0% 0%, light-dark(oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3) h), oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, .4) h)), transparent 30%);
  --aura-app-background: var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt)) var(--aura-background);
  --vaadin-focus-ring-color: var(--aura-accent-color);
  accent-color: var(--aura-accent-color);
  --vaadin-user-color: var(--aura-accent-color);
  --vaadin-background-container: color-mix(in srgb, var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))), transparent);
  --vaadin-background-container-strong: color-mix(in srgb, var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))), transparent);
  color: var(--vaadin-text-color);
  background: var(--aura-app-background);
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

:where(:root, :host), vaadin-button, vaadin-context-menu-item, vaadin-crud-edit, vaadin-drawer-toggle, vaadin-menu-bar-button, vaadin-menu-bar-item, vaadin-checkbox::part(checkbox), vaadin-radio-button::part(radio), vaadin-side-nav-item::part(content) {
  --aura-accent-contrast-light: oklch(from var(--aura-accent-light) clamp(0, (.62 - l) * 1000, 1) 0 0 / clamp(.8, (.62 - l) * 1000, 1));
  --aura-accent-contrast-dark: oklch(from var(--aura-accent-dark) clamp(0, (.62 - l) * 1000, 1) 0 0 / clamp(.8, (.62 - l) * 1000, 1));
  --aura-accent-text-light: color-mix(in srgb, var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-accent-text-dark: color-mix(in srgb, var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
  --aura-accent-contrast: light-dark(var(--aura-accent-contrast-light), var(--aura-accent-contrast-dark));
  --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
}

@supports (color: hsl(0 0 0)) {
  :where(:root, :host) {
    --_safari-17-deg: 1;
  }
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--vaadin-text-color);
}

:where(:root, :host) {
  --aura-color-scheme: light;
  --aura-content-color-scheme: var(--aura-color-scheme);
  --aura-notification-color-scheme: var(--aura-color-scheme);
}

html {
  color-scheme: var(--aura-color-scheme);
}

:where(:root, :host) {
  --aura-red: oklch(60% .22 25);
  --aura-orange: oklch(61% .4 93);
  --aura-yellow: oklch(90% .36 105);
  --aura-green: oklch(60% .28 160);
  --aura-blue: oklch(60% .3 240);
  --aura-purple: oklch(60% .3 280);
  --aura-red-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-orange-text: color-mix(in srgb, var(--aura-orange) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-yellow-text: color-mix(in srgb, var(--aura-yellow) calc(65% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-green-text: color-mix(in srgb, var(--aura-green) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-blue-text: color-mix(in srgb, var(--aura-blue) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-purple-text: color-mix(in srgb, var(--aura-purple) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
  --aura-shadow-color: light-dark(oklch(from var(--aura-background-light) calc(l - l * .8) calc(c / 10) h / .2), oklch(from var(--aura-background-dark) calc(l - l * .8) calc(c / 10) h / .2));
  --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
  --aura-base-size: 16;
  --_size-ref: 16;
  --aura-base-radius: 3;
  --vaadin-radius-s: min(.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
  --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
  --vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
  --vaadin-icon-stroke-width: 1.75;
}

:where(:root, :host, [theme]) {
  --vaadin-padding-xs: round(var(--aura-base-size) * .25 * pow(var(--aura-base-size) / var(--_size-ref), .5) * 1px, 1px);
  --vaadin-padding-s: round(var(--aura-base-size) * .5 * pow(var(--aura-base-size) / var(--_size-ref), .75) * 1px, 1px);
  --vaadin-padding-m: round(var(--aura-base-size) * .75 * pow(var(--aura-base-size) / var(--_size-ref), .3) * 1px, 1px);
  --vaadin-padding-l: calc(var(--aura-base-size) * 1px);
  --vaadin-padding-xl: round(var(--aura-base-size) * 1.5 * pow(var(--aura-base-size) / var(--_size-ref), .1) * 1px, 1px);
  --vaadin-padding-container: round(var(--vaadin-padding-s) / 1.4, 1px) max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
  --vaadin-gap-xs: var(--vaadin-padding-xs);
  --vaadin-gap-s: var(--vaadin-padding-s);
  --vaadin-gap-m: var(--vaadin-padding-m);
  --vaadin-gap-l: var(--vaadin-padding-l);
  --vaadin-gap-xl: var(--vaadin-padding-xl);
}

@media (pointer: coarse) {
  :where(:root, :host) {
    --aura-base-size: 19;
  }
}

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

:is(:root, :host), .aura-surface, .aura-surface-solid, vaadin-accordion-panel[theme~="filled"], vaadin-app-layout::part(navbar), vaadin-app-layout::part(drawer), vaadin-button, vaadin-card, vaadin-checkbox::part(checkbox), vaadin-details[theme~="filled"], vaadin-master-detail-layout::part(detail), vaadin-menu-bar-button, vaadin-message-input, vaadin-radio-button::part(radio), vaadin-rich-text-editor, vaadin-side-nav-item::part(content), vaadin-upload, vaadin-upload-file, ::part(input-field), ::part(overlay), vaadin-confirm-dialog::part(overlay), vaadin-dialog::part(overlay), vaadin-login-overlay::part(overlay), vaadin-crud-dialog::part(overlay) {
  --aura-surface-opacity: .5;
  --aura-surface-solid: light-dark(oklch(from var(--aura-background-light) min(1, l + (.98 - l) * 4 + var(--aura-surface-level) * (.07 - .01 * var(--aura-contrast))  - var(--aura-surface-opacity) / 20) clamp(0, c - l / 10 * var(--aura-surface-level)  + var(--aura-surface-opacity) / 40, c) h), oklch(from var(--aura-background-dark) calc(max(l + .03, .25)  + var(--aura-surface-level) * (.03 - .008 * var(--aura-contrast))  - var(--aura-surface-opacity) / 40) clamp(0, c * (1 + l), .2) h));
  --aura-surface: color-mix(in oklab, var(--aura-surface-solid) calc(100% * var(--aura-surface-opacity)), transparent);
  --vaadin-background-color: var(--aura-surface-solid);
}

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

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

@font-face {
  font-family: Instrument Sans;
  src: url("assets/InstrumentSans-C02vnGmI.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

:where(:root, :host) {
  --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
  --aura-font-family-instrument-sans: "Instrument Sans", var(--aura-font-family-system);
  --aura-font-family: var(--aura-font-family-instrument-sans);
  --aura-base-font-size: 16;
  --aura-font-size-scale: 1.125;
  --aura-base-line-height: 1.4;
  --aura-font-weight: 400;
  --aura-font-weight-medium: 500;
  --aura-font-weight-semibold: 600;
}

@media (pointer: fine) {
  :where(:root, :host) {
    --aura-base-font-size: 14;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    :where(:root, :host) {
      font: -apple-system-body;
    }
  }
}

:where(:root, :host, [theme]) {
  --aura-font-size-xs: round(var(--aura-font-size-s) / var(--aura-font-size-scale), .0625rem);
  --aura-font-size-s: round(var(--aura-font-size-m) / var(--aura-font-size-scale), .0625rem);
  --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, .0625rem);
  --aura-font-size-l: round(var(--aura-font-size-m) * var(--aura-font-size-scale), .0625rem);
  --aura-font-size-xl: round(var(--aura-font-size-l) * var(--aura-font-size-scale), .0625rem);
  --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), .125rem);
  --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), .125rem);
  --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), .125rem);
  --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), .125rem);
  --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), .125rem);
}

:where(body, :host) {
  font-family: var(--aura-font-family);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--aura-font-weight);
  -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
  -moz-osx-font-smoothing: var(--aura-font-smoothing, grayscale);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body, :host, [theme]:not(html)) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-weight: var(--aura-font-weight-semibold);
  margin: 0;
}

:where(h1) {
  font-size: var(--aura-font-size-xl);
  line-height: var(--aura-line-height-xl);
}

:where(h2, h3) {
  font-size: var(--aura-font-size-l);
  line-height: var(--aura-line-height-l);
}

:where(h4, h5) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

:where(h6) {
  font-size: var(--aura-font-size-s);
  line-height: var(--aura-line-height-s);
}

:is(vaadin-details, vaadin-accordion-panel):not([theme~="no-padding"])::part(content) {
  padding: var(--vaadin-padding-container);
  padding-top: 0;
}

:is(vaadin-details, vaadin-accordion-panel):not([theme~="no-padding"], [theme~="reverse"])::part(content) {
  margin-inline-start: calc(var(--vaadin-icon-size, 1lh)  + var(--vaadin-details-summary-gap, var(--vaadin-gap-s)));
}

:is(vaadin-details, vaadin-accordion-panel)[theme~="reverse"] {
  & [slot="summary"]::part(content) {
    width: 100%;
  }

  & [slot="summary"]::part(toggle) {
    order: 1;
    margin-inline-start: auto;
  }
}

:is(vaadin-details, vaadin-accordion-panel)[theme~="filled"] {
  background: var(--aura-surface) padding-box;
  border-radius: var(--vaadin-radius-m);
  border: 1px solid var(--vaadin-border-color-secondary);

  &:has( + :is(vaadin-details, vaadin-accordion-panel)[theme~="filled"]) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  & + :is(vaadin-details, vaadin-accordion-panel)[theme~="filled"] {
    border-top-color: #0000;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
  }
}

:where(:root, :host) {
  --aura-app-layout-inset: 1.5vmin;
  --aura-app-layout-radius: var(--vaadin-radius-l);
  --_aura-mdl-border: 1px;
  --vaadin-app-layout-navbar-padding-top: 0;
  --vaadin-app-layout-navbar-padding-bottom: 0;
  --vaadin-app-layout-navbar-padding-inline-start: 0;
  --vaadin-app-layout-navbar-padding-inline-end: 0;
}

@media (width <= 800px), (height <= 600px) {
  html {
    --_aura-mdl-border: 0px;
    --aura-app-layout-inset: 0px !important;
  }
}

vaadin-app-layout {
  --_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
  padding-block: var(--aura-app-layout-inset);
  padding-inline-end: var(--aura-app-layout-inset);
  padding-top: calc(var(--aura-app-layout-inset)  + var(--_vaadin-app-layout-navbar-offset-size));
}

vaadin-app-layout[overlay] {
  &::part(navbar), &::part(drawer) {
    --vaadin-app-layout-navbar-background: var(--aura-surface);
    --vaadin-app-layout-drawer-background: var(--aura-surface);
    --aura-surface-opacity: var(--aura-overlay-surface-opacity);
    backdrop-filter: var(--aura-overlay-backdrop-filter);
  }
}

vaadin-app-layout:is([overlay], :not([drawer-opened])) {
  padding-inline-start: var(--aura-app-layout-inset);
}

vaadin-app-layout::part(navbar) {
  justify-content: space-between;
}

vaadin-app-layout:not([overlay])::part(navbar) {
  --vaadin-app-layout-navbar-background: transparent;
}

vaadin-app-layout:not([overlay])::part(drawer) {
  padding-block: var(--aura-app-layout-inset);
  padding-inline: max(0px, var(--aura-app-layout-inset)  - var(--vaadin-padding-s));
}

vaadin-app-layout > vaadin-scroller[slot="drawer"] {
  padding-inline: var(--vaadin-padding-m);
  scrollbar-width: thin;
}

vaadin-app-layout > vaadin-scroller:nth-child(1 of [slot="drawer"]) {
  padding-top: var(--vaadin-padding-s);
}

vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot="drawer"]) {
  padding-bottom: var(--vaadin-padding-s);
}

vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  color-scheme: var(--aura-content-color-scheme);
  color: var(--vaadin-text-color);
  background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
  box-sizing: border-box;
  border-radius: var(--_app-layout-radius);
  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);
  border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
  border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
  background-origin: border-box;
  background-clip: padding-box;
  min-height: 100%;
}

vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  & > vaadin-master-detail-layout, &:not([drawer])::part(detail) {
    border-start-end-radius: var(--_app-layout-radius);
    border-end-end-radius: var(--_app-layout-radius);
  }

  &::part(backdrop) {
    border-radius: calc(var(--_app-layout-radius)  - var(--_aura-mdl-border));
  }

  &[drawer][has-detail] {
    border-color: light-dark(var(--vaadin-border-color), var(--vaadin-border-color-secondary));
  }
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"]) {
  padding-top: var(--_vaadin-app-layout-navbar-offset-size);

  &::part(drawer) {
    padding-top: 0;
  }
}

vaadin-app-layout:has([slot="drawer"]):not([overlay]):not([drawer-opened]) > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"])[drawer-opened]:not([overlay]) > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-start-start-radius: var(--aura-app-layout-radius);
}

vaadin-app-layout:has([slot="navbar"]):has([slot="drawer"]) > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
  border-top-width: var(--_aura-mdl-border);
}

vaadin-app-layout:has([slot="navbar"]) > :is(:not([slot]), [slot="drawer"]) vaadin-drawer-toggle:not([theme~="permanent"]), vaadin-app-layout:not(:has([slot="navbar"])) > [slot="drawer"] vaadin-drawer-toggle:not([theme~="permanent"]) {
  display: none;
}

:where(:root, :host) {
  --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
  --vaadin-avatar-background: var(--vaadin-background-container);
  --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
  --vaadin-avatar-font-size: var(--aura-font-size-m);
}

vaadin-avatar:not([img]) {
  --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
  background-image: linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent));
}

:where(:root, :host) {
  --vaadin-button-shadow: 0 1px 4px -1px #00000012;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
  --_accent: light-dark(oklch(from var(--aura-accent-light) calc(l + .2) c h / min(.3, c / 2)), oklch(from var(--aura-accent-dark) calc(l - .2) c h / min(.3, c / 2)));
  --_accent-border: light-dark(oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(.15, .1 + c / 2)  + .1 * var(--aura-contrast))), oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(.15, .1 + c / 2)  + .1 * var(--aura-contrast))));
  --_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
  transition: scale .18s;
  position: relative;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~="tertiary"])) {
  --aura-surface-level: 6;
  --aura-surface-opacity: .3;
  box-shadow: var(--vaadin-button-shadow);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~="primary"], [theme~="tertiary"]) {
  background: var(--vaadin-button-background, var(--_background));
  --vaadin-button-border-color: var(--_accent-border);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~="primary"])) {
  outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
  --vaadin-button-text-color: var(--aura-accent-text);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar):not([slot]))) {
  --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px) max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button):has([slot="prefix"]:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar)), vaadin-drawer-toggle:empty {
  padding-inline-start: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):has([slot="suffix"]:is(vaadin-icon, svg, i[class*="fa-"], vaadin-avatar)), vaadin-drawer-toggle:empty, vaadin-menu-bar-button[aria-haspopup="true"]:not([slot="overflow"]) {
  padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~="primary"]) {
  outline-offset: 2px;
  --vaadin-button-font-weight: var(--aura-font-weight-semibold);
  --vaadin-button-text-color: var(--aura-accent-contrast);
  --vaadin-button-background: var(--aura-accent-color);
  --vaadin-button-border-color: var(--vaadin-border-color-secondary);
  --vaadin-button-shadow: 0 2px 3px -1px #0000003d;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[disabled][theme~="primary"]::part(label) {
  color: color-mix(in srgb, currentColor 50%, transparent);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled]):before {
  content: "";
  inset: calc(var(--vaadin-button-border-width, 1px) * -1);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background-color: currentColor;
  transition: opacity .1s, background-color .1s;
  position: absolute;
}

@supports (color: hsl(0 0 0)) {
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled]):before {
    background-color: oklch(from currentColor calc(l + .4 - c) c h / calc(1 - l / 2));
  }
}

@media (any-hover: hover) {
  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active]):before {
    opacity: .03;
  }

  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~="primary"]:hover:not([disabled], [active]):before {
    opacity: .12;
  }
}

@media (resolution >= 2x) {
  :is(vaadin-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled="true"]) {
    transition-duration: 50ms;
    scale: .98;
  }
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]) {
  box-shadow: none;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]):before {
  opacity: .08;
  background: oklch(from currentColor min(c, 1 - l + c) calc(c * .9) h);
  transition-duration: 0s;
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~="primary"][active]:not([disabled]):before {
  opacity: .16;
}

@container style(--_gap: 0) {
  vaadin-menu-bar-button:not(:first-of-type) {
    border-inline-start-color: #0000;
  }
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~="accent"])) {
  --aura-accent-light: var(--aura-text-light);
  --aura-accent-dark: var(--aura-text-dark);
}

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~="danger"], [theme~="error"]) {
  --aura-accent-light: var(--aura-red);
  --aura-accent-dark: var(--aura-red);
}

:where(:root, :host) {
  --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
  --vaadin-card-padding: var(--vaadin-padding-l);
  --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);
  --vaadin-card-border-color: var(--vaadin-border-color-secondary);
  --vaadin-card-background: var(--aura-surface) padding-box;
}

vaadin-card {
  --vaadin-card-background: var(--aura-surface) padding-box;
  --aura-surface-level: 2;
}

vaadin-card[theme~="outlined"] {
  border: var(--vaadin-card-border-width, 1px) solid transparent;
  --vaadin-card-padding: calc(var(--vaadin-padding-l)  - var(--vaadin-card-border-width, 1px));
}

vaadin-card[theme~="outlined"]:before {
  inset: calc(var(--vaadin-card-border-width, 1px) * -1);
}

vaadin-card[theme~="outlined"][theme~="cover-media"] [slot="media"]:is(img, video, svg, vaadin-icon) {
  margin-inline: calc((var(--_padding)  + var(--vaadin-card-border-width, 1px)) * -1);
  margin-top: calc((var(--_padding)  + var(--vaadin-card-border-width, 1px)) * -1);
  width: calc(100% + (var(--_padding)  + var(--vaadin-card-border-width, 1px)) * 2);
}

vaadin-card[theme~="elevated"] {
  --aura-surface-opacity: .7;
  --aura-surface-level: 3;
  --_shadow-color: light-dark(oklch(from var(--aura-background-light) calc(l - l * .8) calc(c / 10) h / .1), oklch(from var(--aura-background-dark) calc(l - l * .8) calc(c / 10) h / .2));
  --vaadin-card-shadow: 0 1px 6px -1px var(--_shadow-color);
  background-clip: padding-box;
}

vaadin-card[theme~="stretch-media"]:not([theme~="cover-media"]) [slot="media"]:is(img, video, svg, vaadin-icon) {
  border-radius: var(--vaadin-radius-s);
}

:where(:root, :host) {
  --vaadin-radio-button-dot-size: 6px;
  --vaadin-checkbox-size: round(1lh - 2px, 2px);
  --vaadin-radio-button-size: round(1lh - 2px, 2px);
}

vaadin-checkbox::part(checkbox), vaadin-radio-button::part(radio) {
  --vaadin-checkbox-background: var(--aura-surface);
  --vaadin-radio-button-background: var(--aura-surface);
  transition: background-color .1s;
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox), vaadin-radio-button:not([disabled])::part(radio) {
  --aura-surface-level: 4;
  --_shade: color-mix(in srgb, var(--vaadin-border-color-secondary) 50%, transparent);
  background-image: linear-gradient(light-dark(transparent, var(--_shade)), transparent 33%, transparent 66%, light-dark(var(--_shade), transparent));
  box-shadow: 0 2px 1px -1px #00000012;
}

vaadin-checkbox:not([checked], [indeterminate])::part(checkbox), vaadin-radio-button:not([checked])::part(radio) {
  background-clip: padding-box;
}

vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
  --vaadin-checkbox-background: var(--aura-accent-color);
  --vaadin-checkbox-color: var(--aura-accent-contrast);
  --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
}

vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
  --vaadin-radio-button-background: var(--aura-accent-color);
  --vaadin-radio-button-color: var(--aura-accent-contrast);
  --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
}

vaadin-checkbox:not([readonly], [disabled])::part(checkbox):before, vaadin-radio-button:not([disabled])::part(radio):before {
  content: "";
  inset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
  border-radius: inherit;
  opacity: 0;
  background-color: currentColor;
  transition: opacity .1s, background-color .1s;
  position: absolute;
}

@media (any-hover: hover) {
  vaadin-checkbox:hover:not([readonly], [disabled], [active])::part(checkbox):before, vaadin-radio-button:hover:not([disabled], [active])::part(radio):before {
    opacity: .04;
  }
}

vaadin-checkbox[active]:not([readonly], [disabled])::part(checkbox):before, vaadin-radio-button[active]:not([disabled])::part(radio):before {
  opacity: .1;
  background: #000;
}

vaadin-confirm-dialog::part(footer) {
  width: fit-content;
  margin-inline-start: auto;
}

vaadin-confirm-dialog::part(cancel-button), vaadin-confirm-dialog::part(reject-button), vaadin-confirm-dialog::part(confirm-button) {
  flex: 1;
}

vaadin-confirm-dialog :is([slot="cancel-button"], [slot="reject-button"], [slot="confirm-button"]) {
  display: flex;
}

:where(:root, :host) {
  --vaadin-crud-background: var(--aura-surface) padding-box;
}

vaadin-crud-edit {
  padding: var(--vaadin-padding-xs);
  --vaadin-icon-visual-size: .75lh;
}

vaadin-crud::part(editor) {
  background: var(--aura-surface);
}

:where(:root, :host) {
  --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
  --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
  --vaadin-date-picker-date-selected-background: var(--aura-accent-color);
  --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast);
}

:where(:root, :host, [theme]) {
  --vaadin-date-picker-date-width: calc(var(--aura-font-size-m) * 2.5);
  --vaadin-date-picker-year-scroller-width: calc(var(--aura-font-size-m) * 3.5);
}

vaadin-date-picker-month-scroller, vaadin-date-picker-overlay-content::part(toolbar) {
  background: var(--aura-surface);
}

vaadin-date-picker-year-scroller:before {
  background: var(--aura-surface-solid) padding-box;
  width: 12px;
  height: 12px;
}

vaadin-date-picker-year::part(year-number) {
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
}

vaadin-date-picker-year[current]::part(year-number) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-date-picker-year[selected] {
  position: relative;
}

vaadin-date-picker-year[selected]::part(year-number) {
  color: var(--aura-accent-text);
}

vaadin-date-picker-year[selected]:after {
  content: "";
  z-index: -1;
  background: var(--aura-accent-color);
  border-radius: var(--vaadin-radius-s);
  top: -.5lh;
  opacity: .1;
  height: 100%;
  position: absolute;
  inset-inline: 3px;
}

vaadin-date-picker-year::part(year-separator) {
  text-align: center;
  height: 8px;
  line-height: 0;
  translate: 0 -50%;
}

vaadin-date-picker-year::part(year-separator):before {
  content: "";
  background: var(--vaadin-text-color-disabled);
  border-radius: 50%;
  width: 3px;
  height: 3px;
  display: inline-block;
}

:where(:root, :host) {
  --vaadin-dialog-title-font-size: var(--aura-font-size-l);
  --vaadin-dialog-border-width: 0px;
}

vaadin-dialog, vaadin-confirm-dialog, vaadin-crud::part(overlay) {
  color-scheme: var(--aura-content-color-scheme);
}

vaadin-dialog::part(overlay), vaadin-confirm-dialog::part(overlay) {
  --vaadin-dialog-background: var(--aura-surface);
  --aura-surface-level: 4;
  view-transition-name: vaadin-dialog;
}

vaadin-confirm-dialog::part(message) {
  color: var(--vaadin-text-color-secondary);
}

::view-transition-group(vaadin-dialog) {
  border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
  z-index: 1;
}

:where(:root, :host) {
  --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
  --vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
}

:is(vaadin-grid, vaadin-crud-grid)::part(empty-state) {
  justify-content: center;
  align-items: center;
  display: flex;
}

vaadin-grid::part(active-nav-item) {
  --vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
}

vaadin-grid-sorter::part(indicators) {
  transition: color .12s;
}

:is(vaadin-grid, vaadin-crud)[theme~="column-borders"] {
  --vaadin-grid-column-border-width: 1px;
}

:is(vaadin-grid, vaadin-crud)[theme~="no-row-borders"] {
  --vaadin-grid-row-border-width: 0px;
}

:where(:root, :host, [theme]) {
  --vaadin-input-field-background: var(--aura-surface);
  --vaadin-input-field-error-color: var(--aura-red-text);
}

::part(input-field), vaadin-message-input, vaadin-input-container {
  --vaadin-input-field-background: var(--aura-surface);
  --aura-surface-level: 4;
  --aura-surface-opacity: .7;
  background-clip: padding-box;
}

:not([readonly], [disabled])::part(input-field), vaadin-message-input:not([readonly], [disabled]) {
  box-shadow: 0 2px 1px -1px #0000000a;
}

[disabled]::part(input-field) {
  --aura-surface-opacity: .5;
  --aura-surface-level: 1;
}

::part(field-button) {
  transition: color .1s;
}

:not([readonly], [disabled])::part(field-button):active {
  color: var(--vaadin-text-color);
}

@media (any-hover: hover) {
  :not([readonly], [disabled])::part(field-button):hover {
    color: var(--vaadin-text-color);
  }
}

:where(:root, :host) {
  --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
  --vaadin-item-border-radius: calc(var(--vaadin-radius-m)  - var(--vaadin-item-overlay-padding));
  --vaadin-item-checkmark-color: var(--aura-accent-text);
}

:is(vaadin-avatar-group-menu-item, vaadin-combo-box-item, vaadin-context-menu-item, vaadin-time-picker-item, vaadin-item, vaadin-menu-bar-item, vaadin-multi-select-combo-box-item, vaadin-select-item[role]) {
  font-weight: var(--aura-font-weight-medium);
  --vaadin-item-checkmark-color: var(--aura-accent-text);

  &::part(checkmark) {
    --vaadin-icon-visual-size: 75%;
  }

  &::part(content) {
    display: flex;
  }

  @media (any-hover: hover) {
    &:not([disabled], [aria-disabled="true"]):hover {
      background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);

      &[theme~="filled"] {
        background: var(--aura-accent-color);
        color: var(--aura-accent-contrast);
        --vaadin-text-color: var(--aura-accent-contrast);
        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast) 70%, transparent);
        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast) 50%, transparent);
        --vaadin-item-checkmark-color: var(--aura-accent-contrast);

        & > * {
          --aura-red: var(--aura-accent-contrast);
          --aura-red-text: var(--aura-accent-contrast);
          --aura-orange: var(--aura-accent-contrast);
          --aura-orange-text: var(--aura-accent-contrast);
          --aura-yellow: var(--aura-accent-contrast);
          --aura-yellow-text: var(--aura-accent-contrast);
          --aura-green: var(--aura-accent-contrast);
          --aura-green-text: var(--aura-accent-contrast);
          --aura-blue: var(--aura-accent-contrast);
          --aura-blue-text: var(--aura-accent-contrast);
          --aura-purple: var(--aura-accent-contrast);
          --aura-purple-text: var(--aura-accent-contrast);
        }
      }
    }
  }

  &[aria-expanded="true"]:not(:hover) {
    background: var(--vaadin-background-container-strong);
  }

  &[theme~="danger"] {
    --aura-accent-light: var(--aura-red);
    --aura-accent-dark: var(--aura-red);
    color: var(--aura-red-text);
  }
}

[role="menu"] [role="separator"] {
  margin-block: var(--vaadin-gap-xs);
  border-color: var(--vaadin-border-color);
  margin-inline-start: calc(var(--vaadin-icon-size, 1lh)  + var(--vaadin-item-gap, var(--vaadin-gap-s))  + var(--vaadin-gap-xs) * 2);
}

:where(:root, :host) {
  --vaadin-login-form-error-color: var(--aura-red-text);
  --vaadin-login-form-padding: var(--vaadin-padding-xl);
  --vaadin-login-overlay-brand-padding: var(--vaadin-padding-xl);
  --vaadin-login-overlay-brand-background: transparent;
  --vaadin-login-overlay-title-font-size: 1.5em;
  --vaadin-login-overlay-title-line-height: 1.2;
  --vaadin-login-overlay-title-font-weight: var(--aura-font-weight-semibold);
  --vaadin-login-overlay-title-color: var(--vaadin-text-color);
  --vaadin-login-overlay-description-color: var(--vaadin-text-color-secondary);
}

vaadin-login-form::part(error-message) {
  border-radius: var(--vaadin-radius-m);
  padding: var(--vaadin-padding-m);
  background: color-mix(in srgb, var(--aura-red) 10%, transparent);
}

vaadin-login-form::part(error-message-title) {
  font-weight: var(--aura-font-weight-semibold);
}

vaadin-login-overlay {
  --vaadin-overlay-backdrop-background: var(--aura-app-background);

  &::part(overlay) {
    --aura-surface-level: 2;
  }

  &::part(brand) {
    text-align: center;
    padding-bottom: 0;
  }

  &::part(form-title) {
    display: none;
  }

  & [slot="title"] {
    letter-spacing: -.03em;
  }
}

vaadin-master-detail-layout::part(detail) {
  --aura-surface-level: 2;
  background: var(--aura-surface) padding-box;
}

vaadin-master-detail-layout[drawer]::part(detail) {
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  background: var(--aura-surface) padding-box;
  backdrop-filter: var(--aura-overlay-backdrop-filter);
  box-shadow: inset 1px 0 0 0 var(--aura-overlay-inner-outline-color), -1px 0 0 0 var(--aura-overlay-outline-color), var(--aura-shadow-m);
}

vaadin-master-detail-layout[containment="viewport"][drawer]::part(detail) {
  box-shadow: var(--aura-overlay-shadow);
}

vaadin-master-detail-layout[theme~="inset-drawer"][drawer]::part(detail), vaadin-master-detail-layout[containment="viewport"][drawer]::part(detail) {
  margin: calc(var(--aura-app-layout-inset) / 2);
  border-radius: var(--_app-layout-radius);
}

vaadin-master-detail-layout > vaadin-master-detail-layout, vaadin-master-detail-layout:not([drawer])::part(detail) {
  border-start-end-radius: var(--_app-layout-radius);
  border-end-end-radius: var(--_app-layout-radius);
}

::view-transition-group(vaadin-mdl-backdrop), ::view-transition-group(vaadin-mdl-master), ::view-transition-group(vaadin-mdl-detail) {
  border-radius: var(--_app-layout-radius);
  overflow: hidden;
}

@container not style(--vaadin-menu-bar-gap) {
  vaadin-menu-bar:not([has-single-button]) vaadin-menu-bar-button:not([first-visible]) {
    border-inline-start-color: #0000;
  }
}

@media (any-hover: hover) {
  vaadin-menu-bar-button vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
    background: none;
  }
}

vaadin-menu-bar-button[slot="overflow"] {
  font-family: system-ui, sans-serif;
  font-weight: 600;
}

vaadin-message-input vaadin-text-area::part(input-field) {
  --vaadin-input-field-background: transparent;
}

vaadin-message-input[theme~="icon-button"] vaadin-message-input-button {
  width: var(--vaadin-icon-size, 1lh);
  height: var(--vaadin-icon-size, 1lh);
  color: #0000;
  contain: strict;
  position: relative;
}

vaadin-message-input[theme~="icon-button"] vaadin-message-input-button:before {
  content: "";
  mask-image: var(--_vaadin-icon-paper-airplane);
  background: var(--vaadin-button-text-color);
  position: absolute;
  inset: 0;
}

vaadin-message-input[theme~="icon-button"][dir="rtl"] vaadin-message-input-button:before {
  scale: -1;
}

@media (forced-colors: active) {
  vaadin-message-input[theme~="icon-button"] vaadin-message-input-button {
    forced-color-adjust: none;
    --vaadin-button-text-color: CanvasText;
  }
}

:where(:root, :host) {
  --vaadin-chip-padding: .4em;
  --vaadin-chip-background: var(--vaadin-background-container-strong);
}

vaadin-multi-select-combo-box-chip {
  --vaadin-chip-height: 1lh;
  --vaadin-icon-size: 1.25em;
  --vaadin-chip-padding: .4em;
  --vaadin-chip-border-radius: var(--vaadin-radius-s);
  --vaadin-chip-border-width: 0px;
}

:where(:root, :host) {
  --vaadin-notification-border-width: 0px;
  --vaadin-ease-fluid: cubic-bezier(.78, 0, .22, 1);
}

vaadin-notification-container {
  color-scheme: var(--aura-notification-color-scheme);
}

vaadin-notification-card::part(overlay) {
  --aura-surface-level: 4;
  --vaadin-notification-background: var(--aura-surface);
  view-transition-name: vaadin-notification;
}

::view-transition-group(vaadin-notification) {
  z-index: 1;
  border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
}

@supports (background: -webkit-named-image(i)) {
  ::view-transition-group(vaadin-notification) {
    backdrop-filter: none;
  }
}

vaadin-notification-card vaadin-card {
  --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  color: var(--vaadin-text-color-secondary);
}

vaadin-notification-card vaadin-button {
  --aura-surface-level: 8;
  --aura-surface-opacity: .3;
}

:where(:root, :host) {
  --vaadin-overlay-border-width: 0px;
  --vaadin-overlay-backdrop-background: light-dark(oklch(from var(--aura-background-light) calc(l * .1) c h / .15), #0000004d);
  --aura-overlay-outline-color: light-dark(oklch(from var(--aura-background-light) .1 c h / max(.04, .03 + .04 * var(--aura-contrast))), oklch(from var(--aura-background-dark) .1 c h / max(.04, .03 + .04 * var(--aura-contrast))));
  --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast)));
  --aura-overlay-shadow: inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color), var(--aura-shadow-m);
  --aura-overlay-backdrop-filter: blur(20px) brightness(1.1) saturate(1.2);
  --aura-overlay-surface-opacity: .85;

  @media (prefers-reduced-transparency: reduce) {
    --aura-overlay-surface-opacity: 1 !important;
  }
}

::part(overlay) {
  --vaadin-overlay-background: var(--aura-surface);
  --aura-surface-level: 4;
  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
  box-shadow: var(--aura-overlay-shadow);
  backdrop-filter: var(--aura-overlay-backdrop-filter);
  font-family: var(--aura-font-family);
  font-size: var(--aura-font-size-m);
  font-weight: var(--aura-font-weight);
  line-height: var(--aura-line-height-m);
  color: var(--vaadin-text-color);
}

:where(:root, :host) {
  --vaadin-progress-bar-border-width: 0px;
  --vaadin-progress-bar-value-background: linear-gradient(90deg, var(--aura-accent-color), color-mix(in hsl, var(--aura-accent-color) 60%, #f6f4ee));
}

vaadin-progress-bar {
  height: var(--vaadin-gap-s);

  &[dir="rtl"]::part(value) {
    scale: -1;
  }
}

:where(:root, :host) {
  --vaadin-rich-text-editor-toolbar-background: transparent;
  --vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs);
  --vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
  --vaadin-rich-text-editor-toolbar-button-background: transparent;
  --vaadin-rich-text-editor-toolbar-button-border-radius: calc(var(--vaadin-radius-m)  - 2px);
  --vaadin-rich-text-editor-toolbar-button-padding: var(--vaadin-padding-xs);
  --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-secondary);
}

vaadin-rich-text-editor {
  --vaadin-icon-visual-size: 90%;
  --vaadin-rich-text-editor-background: var(--aura-surface) padding-box;
  --aura-surface-level: 4;
  box-shadow: 0 2px 1px -1px #0000000a;
  --aura-surface-opacity: .7 !important;

  &:not(:focus-within) {
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);
  }
}

vaadin-rich-text-editor::part(toolbar) {
  contain: paint;
}

vaadin-rich-text-editor::part(toolbar-group) {
  align-items: center;
  gap: 1px;
}

vaadin-rich-text-editor::part(toolbar-group):before {
  content: "";
  background: var(--vaadin-border-color-secondary);
  width: 1px;
  height: 1lh;
  translate: calc(var(--vaadin-gap-m) / -2);
  position: absolute;
}

vaadin-rich-text-editor::part(toolbar-button) {
  outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
  border: 1px solid #0000;
  transition: color 80ms, background-color 80ms, scale .18s;
  position: relative;
}

vaadin-rich-text-editor::part(toolbar-button-pressed) {
  --vaadin-rich-text-editor-toolbar-button-background: transparent;
}

vaadin-rich-text-editor:focus-within::part(toolbar-button-pressed) {
  --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong) padding-box;
  --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
  border-color: var(--vaadin-text-color-disabled);
}

vaadin-rich-text-editor::part(toolbar-button):active {
  transition-duration: 80ms, 80ms, 50ms;
  scale: .95;
}

@media (any-hover: hover) {
  vaadin-rich-text-editor::part(toolbar-button):hover {
    --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container);
    --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color);
  }
}

vaadin-select-item::part(content) {
  align-items: center;
  gap: inherit;
  display: flex;
}

vaadin-select[theme~="subtle"]::part(input-field) {
  --vaadin-input-field-border-color: transparent;
  --vaadin-input-field-background: transparent;
}

vaadin-select[theme~="subtle"]::part(toggle-button) {
  opacity: 0;
  --vaadin-icon-size: .75lh;
  transition: opacity .2s;
}

vaadin-select[theme~="subtle"][focus-ring]::part(toggle-button) {
  opacity: 1;
}

@media (any-hover: hover) {
  vaadin-select[theme~="subtle"]:hover::part(toggle-button) {
    opacity: 1;
  }
}

vaadin-select[theme~="auto-size"] {
  --vaadin-field-default-width: auto;
}

:where(:root, :host) {
  --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
  --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
  --vaadin-side-nav-item-border-width: 1px;
  --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
}

vaadin-side-nav + vaadin-side-nav {
  margin-top: var(--vaadin-gap-l);
}

vaadin-side-nav-item::part(content) {
  --aura-surface-level: 3;
  transition: color .12s, border-color .12s, background-color .12s;
}

vaadin-side-nav-item:not([disabled])::part(content):hover {
  --vaadin-side-nav-item-color: var(--vaadin-text-color);
}

vaadin-side-nav-item[current]::part(content) {
  --_accent: light-dark(oklch(from var(--aura-accent-light) calc(l + .2) c h / min(.3, c / 2)), oklch(from var(--aura-accent-dark) calc(l - .2) c h / min(.3, c / 2)));
  --_accent-border: light-dark(oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(.15, .05 + c / 2)  + .1 * var(--aura-contrast))), oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(.15, .05 + c / 2)  + .1 * var(--aura-contrast))));
  --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
  --vaadin-side-nav-item-color: var(--aura-accent-text);
  --vaadin-side-nav-item-border-color: var(--_accent-border);
}

vaadin-side-nav[theme~="filled"] vaadin-side-nav-item[current]::part(content) {
  --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
  --vaadin-side-nav-item-color: var(--aura-accent-contrast);
  outline-offset: 2px;
}

vaadin-side-nav[theme~="filled"] vaadin-side-nav-item[current] > :not([slot="children"]):not([slot="tooltip"]) {
  --vaadin-text-color: var(--vaadin-side-nav-item-color);
  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
  --aura-accent-color: var(--vaadin-side-nav-item-color);
  --aura-accent-text: var(--vaadin-side-nav-item-color);
  --aura-red: var(--vaadin-side-nav-item-color);
  --aura-red-text: var(--vaadin-side-nav-item-color);
  --aura-orange: var(--vaadin-side-nav-item-color);
  --aura-orange-text: var(--vaadin-side-nav-item-color);
  --aura-yellow: var(--vaadin-side-nav-item-color);
  --aura-yellow-text: var(--vaadin-side-nav-item-color);
  --aura-green: var(--vaadin-side-nav-item-color);
  --aura-green-text: var(--vaadin-side-nav-item-color);
  --aura-blue: var(--vaadin-side-nav-item-color);
  --aura-blue-text: var(--vaadin-side-nav-item-color);
  --aura-purple: var(--vaadin-side-nav-item-color);
  --aura-purple-text: var(--vaadin-side-nav-item-color);
}

:where(:root, :host) {
  --vaadin-upload-background: var(--aura-surface) padding-box;
  --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
  --vaadin-upload-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-list-divider-color: var(--vaadin-border-color-secondary);
  --vaadin-upload-file-list-divider-width: 1px;
  --vaadin-upload-file-error-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-file-warning-color: var(--aura-red);
  --vaadin-upload-file-done-color: var(--aura-green);
  --vaadin-upload-file-name-font-weight: var(--aura-font-weight-medium);
  --vaadin-upload-file-padding: var(--vaadin-padding-s);
  --vaadin-upload-file-gap: 0 var(--vaadin-gap-s);
  --vaadin-upload-file-button-padding: var(--vaadin-upload-file-padding);
  --vaadin-upload-file-button-border-width: 0;
  --vaadin-upload-file-status-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-status-line-height: var(--aura-line-height-s);
  --vaadin-upload-file-error-font-size: var(--aura-font-size-s);
  --vaadin-upload-file-error-line-height: var(--aura-line-height-s);
  --vaadin-upload-drop-label-color: var(--vaadin-text-color-secondary);
  --vaadin-upload-drop-label-font-weight: var(--aura-font-weight-medium);
}

vaadin-upload {
  --_divider-offset-start: calc(var(--vaadin-padding-s)  + var(--vaadin-icon-size, 1lh)  + var(--vaadin-gap-s));
  --_divider-offset-end: var(--vaadin-padding-s);
}

vaadin-upload::part(primary-buttons) {
  gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
  flex-wrap: wrap;
}

vaadin-upload:not([nodrop]) vaadin-button[slot="add-button"] {
  flex: 1;
}

vaadin-upload::part(drop-label) {
  padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
  min-width: fit-content;
  flex: 100;
  margin-inline-start: calc(var(--vaadin-upload-padding) * -1);
}

vaadin-upload[dragover-valid] {
  outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
  outline-offset: -1px;
}

vaadin-upload-file-list li {
  margin-inline: var(--_divider-offset-start) var(--_divider-offset-end);

  &:first-child {
    margin-top: 0;
  }
}

vaadin-upload:not([theme~="no-border"]) vaadin-upload-file-list:has(li) {
  border-top: 1px solid var(--vaadin-border-color-secondary);
  margin: calc(var(--vaadin-upload-padding) * -1);
  margin-top: var(--vaadin-upload-padding);
}

vaadin-upload-file {
  --vaadin-icon-visual-size: .75lh;
  border-radius: var(--vaadin-radius-m);
  padding-block: var(--vaadin-padding-m);
  margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);

  &::part(done-icon), &::part(warning-icon), &::part(commands) {
    align-self: baseline;
  }

  &:not([complete], [error])::part(done-icon) {
    display: block;
  }

  &:not([complete], [error])::part(done-icon):before {
    background: var(--vaadin-border-color-secondary);
  }

  &::part(commands) {
    margin-block: calc(var(--vaadin-upload-file-button-padding) * -1);
    margin-inline-end: calc(var(--vaadin-upload-file-button-padding) * -1);
  }

  &::part(remove-button), &::part(retry-button) {
    --vaadin-upload-file-button-text-color: var(--vaadin-text-color-secondary);
    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
  }

  & vaadin-progress-bar {
    height: var(--vaadin-gap-xs);
    margin-top: var(--vaadin-gap-xs);
    display: block;
  }

  &:not([error])::part(status) {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2lh;
    display: -webkit-box;
    overflow: hidden;
  }

  &[complete]::part(status) {
    visibility: hidden;
    height: 1lh;
    max-height: 0;
    transition: max-height .2s;
  }

  &[complete] vaadin-progress-bar {
    visibility: hidden;
    height: 0;
    margin-top: 0;
    transition: height .2s;
  }
}

vaadin-upload[theme~="no-border"] {
  --vaadin-upload-padding: 0;
  --vaadin-upload-background: transparent;
  --vaadin-upload-border: none;
  --vaadin-upload-file-list-divider-width: 0;
  --_divider-offset-start: 0px;
  --_divider-offset-end: 0px;
  outline-offset: 2px;

  & vaadin-upload-file-list::part(list) {
    gap: var(--vaadin-gap-s);
    flex-direction: column;
    display: flex;
  }

  & vaadin-upload-file-list li:first-child {
    margin-top: var(--vaadin-gap-s);
  }

  & vaadin-upload-file {
    background: var(--aura-surface) padding-box;
    border: 1px solid var(--vaadin-border-color-secondary);
  }
}

@media (any-hover: hover) {
  vaadin-upload-file::part(remove-button):hover, vaadin-upload-file::part(retry-button):hover {
    --vaadin-upload-file-button-text-color: var(--vaadin-text-color);
  }
}

:where(:root, :host) {
  cursor: default;
  --_vaadin-icon-chevron-down: 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=\"m6 9 6 6 6-6\"/></svg>");
}