:where(:host), :where(:root) {
    --aura-contrast-level: 1;
    --aura-accent-color-light: var(--aura-neutral-light);
    --aura-accent-color-dark: var(--aura-neutral-dark);
    --aura-accent-color-light-initial: var(--aura-accent-color-light);
    --aura-accent-color-dark-initial: var(--aura-accent-color-dark);
    --aura-background-color-light: oklch(0.95 0.005 248);
    --aura-background-color-dark: oklch(0.2 0.01 260);
    --_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, 0.4) h)), transparent 30%);
    --aura-app-background: var(--aura-background-color);
    --vaadin-focus-ring-color: var(--aura-accent-color);
    --vaadin-user-color: var(--aura-blue);
    background: var(--aura-app-background);
    background-attachment: fixed;
    background-size: 100vw 100vh;
    color: var(--vaadin-text-color)
}

@supports (color:hsl(0 0 0)) {
    @scope (:root) {
        :where(:scope) {
            --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)
        }
    }
}

:where(.aura-accent-color,.aura-accent-neutral,.aura-accent-red,.aura-accent-orange,.aura-accent-yellow,.aura-accent-green,.aura-accent-blue,.aura-accent-purple), :where(:host), :where(:root), vaadin-app-layout > :not([slot]), vaadin-avatar, vaadin-button, vaadin-checkbox::part(checkbox), vaadin-context-menu-item, vaadin-crud-edit, vaadin-drawer-toggle, vaadin-menu-bar-button, vaadin-menu-bar-item, vaadin-notification-container, vaadin-radio-button::part(radio), vaadin-side-nav-item::part(content), vaadin-tab {
    --aura-neutral-light: oklch(from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h);
    --aura-neutral-dark: oklch(from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h);
    --aura-neutral: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
    --vaadin-text-color: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
    --vaadin-text-color-secondary: color-mix(in oklch, var(--vaadin-text-color) min(95%, 60% + 5% * var(--aura-contrast-level)), transparent);
    --vaadin-text-color-disabled: color-mix(in oklch, var(--vaadin-text-color) min(95%, 30% + 3% * var(--aura-contrast-level)), transparent);
    --_border-color-base: light-dark(oklch(from var(--aura-background-color-light) 0.1 c h), oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h));
    --vaadin-border-color: color-mix(in srgb, var(--_border-color-base) calc(14% + 6% * var(--aura-contrast-level)), transparent);
    --vaadin-border-color-secondary: light-dark(color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 3% * var(--aura-contrast-level)), transparent), color-mix(in srgb, var(--_border-color-base) max(8%, 7% + 3% * var(--aura-contrast-level)), transparent));
    --aura-accent-contrast-color-light: oklch(from var(--aura-accent-color-light) clamp(0, (0.62 - l) * 1000, 1) 0 0/clamp(0.8, (0.62 - l) * 1000, 1));
    --aura-accent-contrast-color-dark: oklch(from var(--aura-accent-color-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0/clamp(0.8, (0.62 - l) * 1000, 1));
    --aura-accent-text-color-light: oklch(from var(--aura-accent-color-light) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h);
    --aura-accent-text-color-dark: oklch(from var(--aura-accent-color-dark) max(0.8, 0.9 + 0.1 * var(--aura-contrast-level) - c * 2) calc(c * 0.9) h);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
    --aura-accent-contrast-color: light-dark(var(--aura-accent-contrast-color-light), var(--aura-accent-contrast-color-dark));
    --aura-accent-text-color: light-dark(var(--aura-accent-text-color-light), var(--aura-accent-text-color-dark));
    --_accent-surface-light: color-mix(in srgb, oklch(from var(--aura-accent-color-light) l c h/min(1, c + (1 - l) / 20)) calc((60% - 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)), var(--aura-surface-color-solid) calc((25% + 20% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)));
    --_accent-surface-dark: color-mix(in srgb, oklch(from var(--aura-accent-color-dark) l c h/min(1, c + (1 - l) / 10)) calc((60% - 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)), var(--aura-surface-color-solid) calc((40% + 6% * abs(var(--aura-surface-level))) * var(--aura-surface-opacity)));
    --aura-accent-surface: light-dark(var(--_accent-surface-light), var(--_accent-surface-dark));
    --_accent-border: light-dark(oklch(from var(--aura-accent-color-light) 0.8 calc(c * 1.1) h/min(1, c + (1 - l) / 10)), oklch(from var(--aura-accent-color-dark) 0.8 calc(c * 1.1) h/min(1, c + (1 - l) / 10)));
    --aura-accent-border-color: color-mix(in srgb, var(--_accent-border) calc(30% - 1% * var(--aura-surface-level) + 1% * var(--aura-contrast-level)), var(--vaadin-border-color) 60%);
    --_color-base: light-dark(oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h), oklch(from var(--aura-background-color-dark) 1 c h));
    --aura-background-color: light-dark(var(--aura-background-color-light), var(--aura-background-color-dark));
    --vaadin-background-container: color-mix(in srgb, var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast-level))), transparent);
    --vaadin-background-container-strong: color-mix(in srgb, var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast-level))), transparent);
    accent-color: var(--aura-accent-color)
}

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

:where(a:any-link) {
    color: var(--aura-accent-text-color)
}

:is(#id,.aura-accent-color) {
    --aura-accent-color-light: var(--aura-accent-color-light-initial);
    --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-neutral) {
    --aura-accent-color-light: var(--aura-neutral-light);
    --aura-accent-color-dark: var(--aura-neutral-dark);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,[theme~=danger],[theme~=error],.aura-accent-red) {
    --aura-accent-color-light: var(--aura-red);
    --aura-accent-color-dark: var(--aura-red);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-green) {
    --aura-accent-color-light: var(--aura-green);
    --aura-accent-color-dark: var(--aura-green);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-yellow) {
    --aura-accent-color-light: var(--aura-yellow);
    --aura-accent-color-dark: var(--aura-yellow);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-orange) {
    --aura-accent-color-light: var(--aura-orange);
    --aura-accent-color-dark: var(--aura-orange);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-purple) {
    --aura-accent-color-light: var(--aura-purple);
    --aura-accent-color-dark: var(--aura-purple);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:is(#id,.aura-accent-blue) {
    --aura-accent-color-light: var(--aura-blue);
    --aura-accent-color-dark: var(--aura-blue);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark))
}

:where(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle) > *, :where(vaadin-side-nav-item) > *, :where(vaadin-tab) > * {
    --aura-accent-color-light: var(--aura-accent-color-light-initial);
    --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
    --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial))
}

:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[theme~=primary] > *, :is(vaadin-combo-box-item,vaadin-context-menu-item,vaadin-item,vaadin-menu-bar-item,vaadin-multi-select-combo-box-item,vaadin-select-item[role])[theme~=filled]:not([disabled],[aria-disabled=true]):hover > *, vaadin-side-nav[theme~=filled] > vaadin-side-nav-item[current] > :not([slot=children]):not([slot=tooltip]), vaadin-tabs[theme~=filled] > vaadin-tab[selected] > :not([slot=tooltip]) {
    --vaadin-icon-color: currentColor;
    --vaadin-text-color: currentColor;
    --vaadin-text-color-secondary: color-mix(in srgb, currentColor 70%, transparent);
    --vaadin-text-color-disabled: color-mix(in srgb, currentColor 50%, transparent);
    --aura-accent-text-color: currentColor;
    --aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
    --aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent)
}

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

:where(:host), :where(:root) {
    --aura-red: oklch(0.59 0.2 25);
    --aura-orange: oklch(0.61 0.35 87);
    --aura-yellow: oklch(0.89 0.3 98);
    --aura-green: oklch(0.6 0.2 155);
    --aura-blue: oklch(0.55 0.2 264);
    --aura-purple: oklch(0.58 0.22 290);
    --aura-red-text: light-dark(oklch(from var(--aura-red) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-red) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));
    --aura-orange-text: light-dark(oklch(from var(--aura-orange) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-orange) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));
    --aura-yellow-text: light-dark(oklch(from var(--aura-yellow) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-yellow) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));
    --aura-green-text: light-dark(oklch(from var(--aura-green) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-green) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));
    --aura-blue-text: light-dark(oklch(from var(--aura-blue) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-blue) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h));
    --aura-purple-text: light-dark(oklch(from var(--aura-purple) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c * 0.75) calc(c * 0.9) h), oklch(from var(--aura-purple) max(0.8, 0.9 + 0.05 * var(--aura-contrast-level) - c * 0.75) calc(c * 0.9) h))
}

:where(:host), :where(:root) {
    --aura-shadow-color: light-dark(oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h/0.2), oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));
    --aura-shadow-xs: 0 1px 4px -2px var(--aura-shadow-color);
    --aura-shadow-s: 0 2px 5px -1px var(--aura-shadow-color);
    --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color)
}

:where(:host), :where(:root) {
    --aura-base-size: 16;
    --_size-ref: 16;
    --aura-base-radius: 3;
    --vaadin-radius-s: min(0.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(:host), :where(:root), :where([theme]) {
    --vaadin-padding-xs: round(var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px, 1px);
    --vaadin-padding-s: round(var(--aura-base-size) * 0.5 * pow(var(--aura-base-size) / var(--_size-ref), 0.75) * 1px, 1px);
    --vaadin-padding-m: round(var(--aura-base-size) * 0.75 * pow(var(--aura-base-size) / var(--_size-ref), 0.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), 0.1) * 1px, 1px);
    --vaadin-padding-block-container: round(var(--vaadin-padding-s) / 1.4, 1px);
    --vaadin-padding-inline-container: 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(:host), :where(:root) {
        --aura-base-size: 18
    }
}

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

.aura-surface, .aura-surface-solid, ::part(input-field), ::part(overlay), :host, :root, vaadin-accordion-panel[theme~=filled], vaadin-app-layout, vaadin-app-layout::part(drawer), vaadin-app-layout::part(navbar), vaadin-button, vaadin-card, vaadin-checkbox::part(checkbox), vaadin-confirm-dialog::part(overlay), vaadin-crud-dialog::part(overlay), vaadin-dashboard-widget, vaadin-details[theme~=filled], vaadin-dialog::part(overlay), vaadin-login-overlay::part(overlay), 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-tab, vaadin-tabs, vaadin-upload, vaadin-upload-file {
    --aura-surface-opacity: 0.5;
    --aura-surface-color-solid: light-dark(oklch(from var(--aura-background-color-light) min(1, l + ((1 - l) / 2 + 0.04) * var(--aura-surface-level)) clamp(0, c - (c / 3 + (l / 1000)) * var(--aura-surface-level), c) h), oklch(from var(--aura-background-color-dark) calc(max(0.03, l) + var(--aura-surface-level) * 0.03 + max(0, 0.2 - max(0.03, l)) * (1.1 - var(--aura-surface-level) * 0.06)) 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
}

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

:where(:host), :where(:root) {
    --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);
    --vaadin-icon-baseline-font-family: var(--aura-font-family);
    --aura-base-font-size: 14;
    --aura-base-line-height: 1.4;
    --aura-font-weight-regular: 400;
    --aura-font-weight-medium: 500;
    --aura-font-weight-semibold: 600
}

@media (pointer: coarse) {
    :where(:host), :where(:root) {
        --vaadin-input-field-value-font-size: max(16px, var(--aura-font-size-m))
    }
}

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

:where(:host), :where(:root), :where([theme]) {
    --aura-font-size-xs: clamp(0.625rem, round(var(--aura-font-size-m) * 0.75, 0.0625rem), 0.8125rem);
    --aura-font-size-s: round((var(--aura-font-size-m) + var(--aura-font-size-xs)) / 2, 0.0625rem);
    --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
    --aura-font-size-l: round(var(--aura-font-size-m) * 1.125, 0.0625rem);
    --aura-font-size-xl: round(var(--aura-font-size-l) * 1.125, 0.0625rem);
    --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), 0.125rem);
    --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), 0.125rem);
    --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), 0.125rem);
    --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), 0.125rem);
    --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem)
}

:where(:host), :where(body) {
    font-family: var(--aura-font-family);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: var(--aura-font-weight-regular);
    -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(:host), :where([theme]:not(html)), :where(body) {
    font-size: var(--aura-font-size-m);
    line-height: var(--aura-line-height-m)
}

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

: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)
}

:where(:host), :where(:root) {
    --vaadin-accordion-heading-gap: var(--vaadin-gap-xs);
    --vaadin-details-summary-gap: var(--vaadin-gap-xs)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

vaadin-app-layout::part(navbar) {
    --vaadin-app-layout-navbar-background: transparent;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

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[has-navbar]::part(drawer) {
    padding-top: var(--safe-area-inset-top)
}

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

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

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

vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
    height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));
    margin-block: calc(var(--safe-area-inset-top) * -1) calc(var(--safe-area-inset-bottom) * -1);
    margin-inline: calc(var(--safe-area-inset-left) * -1) calc(var(--safe-area-inset-right) * -1);
    max-height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));
    max-width: calc(100% + var(--safe-area-inset-left) + var(--safe-area-inset-right));
    padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);

    &::part(detail) {
        padding-bottom: var(--safe-area-inset-bottom);
        padding-top: var(--safe-area-inset-top)
    }

    &:dir(ltr)::part(detail) {
        padding-right: var(--safe-area-inset-right)
    }

    &:dir(rtl)::part(detail) {
        padding-left: var(--safe-area-inset-left)
    }

    &[stack]::part(detail) {
        padding-left: var(--safe-area-inset-left);
        padding-right: var(--safe-area-inset-right)
    }

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

    &::part(backdrop) {
        border-radius: calc(var(--_app-layout-radius) - var(--aura-app-layout-border-width))
    }

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

vaadin-app-layout[has-drawer][drawer-opened]:not([overlay]) > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
    border-inline-start-width: var(--aura-app-layout-border-width)
}

vaadin-app-layout[has-navbar][has-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-navbar] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
    border-top-width: var(--aura-app-layout-border-width)
}

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

vaadin-avatar {
    color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
    --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
    background: var(
            --vaadin-avatar-background, linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent)), var(--aura-accent-surface)
    );
    background-clip: content-box
}

vaadin-avatar:where([has-color-index]) {
    --aura-accent-color-light: var(--vaadin-avatar-user-color);
    --aura-accent-color-dark: var(--vaadin-avatar-user-color);
    --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
    color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
    --vaadin-avatar-background: var(--vaadin-accent-surface);
    --vaadin-avatar-text-color: var(--aura-accent-text-color);
    --vaadin-avatar-border-color: var(--aura-accent-border-color);
    --vaadin-avatar-border-width: 1px
}

vaadin-avatar[img][has-color-index] {
    --vaadin-avatar-border-color: var(--aura-accent-color);
    --vaadin-avatar-border-width: 2px
}

vaadin-avatar[theme~=filled] {
    background: var(--aura-accent-color) content-box;
    color: var(--aura-accent-contrast-color)
}

:where(:host), :where(:root) {
    --vaadin-button-shadow: 0 1px 4px -1px rgba(0, 0, 0, .07)
}

:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit) {
    position: relative;
    transition: scale .18s;
    --_background: var(--aura-accent-surface) padding-box;
    --vaadin-button-text-color: var(--aura-accent-text-color)
}

vaadin-drawer-toggle[theme~=tertiary]::part(icon) {
    opacity: .6
}

:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle,vaadin-crud-edit):where(:not([theme~=tertiary])) {
    --aura-surface-level: 6;
    --aura-surface-opacity: 0.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(--aura-accent-border-color)
}

: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)
}

: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-color);
    --vaadin-button-background: var(--aura-accent-color);
    --vaadin-button-border-color: var(--vaadin-border-color-secondary);
    --vaadin-button-shadow: 0 2px 3px -1px rgba(0, 0, 0, .24)
}

: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 {
    background-color: currentColor;
    border-radius: inherit;
    content: "";
    inset: calc(var(--vaadin-button-border-width, 1px) * -1);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .1s, background-color .1s
}

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

: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 {
    background: oklch(from currentColor min(c, 1 - l + c) calc(c * .9) h);
    opacity: .08;
    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: transparent
    }
}

:where(:host), :where(:root) {
    --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-border-width: 1px
}

vaadin-card {
    background: var(--vaadin-card-background, var(--aura-surface-color) padding-box);
    background-clip: padding-box;
    --aura-surface-level: 2;
    --aura-surface-opacity: 0.5;
    border: var(--vaadin-card-border-width) solid transparent;
    --_padding: calc(var(--vaadin-card-padding) - var(--vaadin-card-border-width, 1px))
}

vaadin-card[theme~=outlined] {
    --vaadin-card-border-color: var(--vaadin-border-color)
}

vaadin-card:before {
    inset: calc(var(--vaadin-card-border-width) * -1)
}

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

vaadin-card[theme~=elevated] {
    --aura-surface-opacity: 0.7;
    --aura-surface-level: 3;
    background: var(--aura-surface-color) padding-box;
    --_shadow-color: light-dark(oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h/0.1), oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));
    --vaadin-card-shadow: 0 1px 4px -1px var(--_shadow-color)
}

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

:where(:host), :where(:root) {
    --vaadin-charts-background: transparent
}

:where(:host), :where(:root) {
    --vaadin-radio-button-marker-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-color);
    --vaadin-radio-button-background: var(--aura-surface-color);
    transition: background-color .1s
}

vaadin-checkbox:not([readonly],[disabled])::part(checkbox), vaadin-radio-button:not([disabled])::part(radio) {
    --aura-surface-level: 4;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .07);
    --_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))
}

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-marker-color: var(--aura-accent-contrast-color);
    --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-marker-color: var(--aura-accent-contrast-color);
    --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 {
    background-color: currentColor;
    border-radius: inherit;
    content: "";
    inset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
    opacity: 0;
    position: absolute;
    transition: opacity .1s, background-color .1s
}

@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 {
    background: #000;
    opacity: .1
}

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

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

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

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

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

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

vaadin-crud vaadin-confirm-dialog {
    color-scheme: inherit
}

:where(:host), :where(:root) {
    --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-color)
}

:where(:host), :where(:root), :where([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-color)
}

vaadin-date-picker-year-scroller:before {
    background: var(--aura-surface-color-solid) padding-box;
    height: 12px;
    width: 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-color)
}

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

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

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

:where(:host), :where(:root) {
    --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium);
    --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
    --vaadin-dashboard-widget-header-gap: var(--vaadin-gap-xs);
    --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m)
}

vaadin-dashboard-widget {
    --aura-surface-level: 2;
    --aura-surface-opacity: 0.5;
    background: var(--vaadin-dashboard-widget-background, var(--aura-surface-color) padding-box);
    border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px));

    &:before {
        border-radius: var(--vaadin-dashboard-widget-border-radius);
        inset: calc(var(--vaadin-dashboard-widget-border-width, 1px) * -1)
    }

    &::part(content) {
        transition: .2s;
        transition-property: filter, opacity
    }

    &:is([resize-mode],[move-mode])::part(content) {
        clip-path: inset(0);
        filter: blur(10px);
        opacity: .75;
        transition-duration: 50ms
    }

    &[theme~=outlined] {
        --vaadin-dashboard-widget-border-color: var(--vaadin-border-color)
    }

    &[theme~=elevated] {
        --aura-surface-opacity: 0.7;
        --aura-surface-level: 3;
        box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s))
    }

    &[editable] {
        --vaadin-dashboard-widget-shadow: var(--aura-shadow-s)
    }
}

vaadin-dashboard-section {
    vaadin-dashboard-widget {
        transition: .2s;
        transition-property: filter, opacity
    }

    &[move-mode] vaadin-dashboard-widget {
        clip-path: inset(0);
        filter: blur(10px);
        opacity: .75;
        transition-duration: 50ms
    }
}

:is(vaadin-dashboard-widget,vaadin-dashboard-section) {
    &::part(move-backward-button), &::part(move-forward-button), &::part(resize-grow-height-button), &::part(resize-grow-width-button), &::part(resize-shrink-height-button), &::part(resize-shrink-width-button) {
        background: var(--aura-surface-color) padding-box;
        border: 1px solid var(--vaadin-border-color);
        color: var(--vaadin-text-color-secondary);
        outline-offset: -1px;
        transition: color .12s
    }

    &::part(resize-grow-height-button), &::part(resize-shrink-height-button) {
        border-bottom: 0;
        margin-top: 0
    }

    &::part(move-forward-button), &::part(resize-grow-width-button), &::part(resize-shrink-width-button) {
        border-inline-end: 0;
        margin-inline-start: 0
    }

    &::part(move-backward-button) {
        border-inline-start: 0;
        margin-inline-end: 0
    }

    &::part(move-apply-button), &::part(resize-apply-button) {
        background: var(--aura-accent-color);
        box-shadow: 0 0 0 3px var(--aura-surface-color);
        color: var(--aura-accent-contrast-color);
        outline-offset: 2px
    }

    &::part(move-button), &::part(remove-button), &::part(resize-button) {
        color: var(--vaadin-text-color-disabled);
        outline-offset: -2px;
        transition: color .12s
    }

    &[editable] {
        --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs)
    }
}

@media (any-hover: hover) {
    :is(vaadin-dashboard-widget,vaadin-dashboard-section) {
        &::part(move-backward-button):hover, &::part(move-button):hover, &::part(move-forward-button):hover, &::part(remove-button):hover, &::part(resize-button):hover, &::part(resize-grow-height-button):hover, &::part(resize-grow-width-button):hover, &::part(resize-shrink-height-button):hover, &::part(resize-shrink-width-button):hover {
            color: var(--vaadin-text-color)
        }
    }
}

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

vaadin-confirm-dialog, vaadin-dialog {
    color-scheme: var(--aura-content-color-scheme, var(--aura-color-scheme))
}

vaadin-confirm-dialog::part(overlay), vaadin-dialog::part(overlay) {
    --vaadin-dialog-background: var(--aura-surface-color);
    --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(:host), :where(:root) {
    --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
    --vaadin-grid-background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)) var(--aura-background-color) padding-box
}

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

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(:host), :where(:root), :where([theme]) {
    --vaadin-input-field-background: var(--aura-surface-color);
    --vaadin-input-field-error-color: var(--aura-red-text)
}

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

:not([readonly],[disabled])::part(input-field), vaadin-message-input:not([readonly],[disabled]) {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .04)
}

[readonly]::part(input-field) {
    --aura-surface-opacity: 0
}

[disabled]::part(input-field) {
    --vaadin-input-field-background: var(--vaadin-background-container)
}

::part(field-button) {
    transition: color .1s;
    --vaadin-icon-visual-size: 90%
}

::part(clear-button) {
    --vaadin-icon-visual-size: 75%
}

: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(:host), :where(:root) {
    --aura-item-overlay-padding-inline: var(--vaadin-padding-xs);
    --aura-item-overlay-padding-block: var(--vaadin-padding-xs);
    --vaadin-item-overlay-padding: var(--aura-item-overlay-padding-block) var(--aura-item-overlay-padding-inline);
    --vaadin-item-border-radius: clamp(0px, var(--aura-item-overlay-padding-inline) * 100, var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block)));
    --vaadin-item-checkmark-color: var(--aura-accent-text-color);
    --vaadin-item-gap: var(--vaadin-gap-s)
}

: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:where([role])) {
    font-weight: var(--aura-font-weight-medium);
    --vaadin-item-checkmark-color: var(--aura-accent-text-color);
    -webkit-user-select: none;
    user-select: none;
    --_highlight-color: light-dark(oklch(from var(--aura-accent-color-light) min(0.9, l) c h/max(0.05, l / 4)), oklch(from var(--aura-accent-color-dark) max(0.6, l) c h/max(0.2, l / 4)));
    gap: 0;
    padding-inline-start: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));

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

    &[aria-haspopup=true] {
        padding-inline-end: max(0px, var(--vaadin-padding-inline-container) - var(--aura-item-overlay-padding-inline));

        &:after {
            --vaadin-icon-visual-size: 90%
        }
    }

    &::part(content) {
        gap: var(--vaadin-item-gap);
        padding-inline: var(--vaadin-gap-xs)
    }

    @media (any-hover: hover) {
        &:not([disabled],[aria-disabled=true]):hover {
            background: var(--_highlight-color);

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

    &:active {
        background: var(--_highlight-color)
    }

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

    &:where([theme~=danger]) {
        color: var(--aura-red-text);

        > * {
            --aura-accent-color-light: var(--aura-accent-color-light-initial);
            --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
            --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial))
        }
    }
}

[role=menu] [role=separator] {
    border-color: var(--vaadin-border-color);
    margin-block: var(--vaadin-gap-xs);
    margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container))
}

:where(:host), :where(:root) {
    --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) {
    background: color-mix(in srgb, var(--aura-red) 10%, transparent);
    border-radius: var(--vaadin-radius-m);
    padding: var(--vaadin-padding-m)
}

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) {
        padding-bottom: 0;
        text-align: center
    }

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

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

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

vaadin-master-detail-layout[drawer]::part(detail) {
    --aura-surface-opacity: var(--aura-overlay-surface-opacity);
    -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
    backdrop-filter: var(--aura-overlay-backdrop-filter);
    background: var(--aura-surface-color) padding-box;
    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[containment=viewport][drawer]::part(detail), vaadin-master-detail-layout[theme~=inset-drawer][drawer]::part(detail) {
    border-radius: var(--_app-layout-radius);
    margin: calc(var(--aura-app-layout-inset) / 2)
}

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

::view-transition-group(vaadin-mdl-backdrop), ::view-transition-group(vaadin-mdl-detail), ::view-transition-group(vaadin-mdl-master) {
    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: transparent
    }
}

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

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

vaadin-menu-bar-button[aria-haspopup=true]::part(suffix):after {
    --vaadin-icon-visual-size: 90%
}

vaadin-menu-bar-button vaadin-menu-bar-item {
    padding-inline: 0
}

vaadin-menu-bar-button vaadin-menu-bar-item::part(content) {
    gap: var(--vaadin-button-gap, var(--vaadin-gap-s));
    padding-inline: 0
}

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

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

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

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(:host), :where(:root) {
    --vaadin-chip-padding: 0.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: 0.4em;
    --vaadin-chip-border-radius: var(--vaadin-radius-s);
    --vaadin-chip-border-width: 0px
}

:where(:host), :where(:root) {
    --vaadin-notification-border-width: 0px;
    --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
    --vaadin-notification-padding: var(--vaadin-padding-m)
}

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-color);
    view-transition-name: vaadin-notification
}

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

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

vaadin-notification-card vaadin-card {
    --vaadin-card-border-width: 0px;
    --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
}

:where(:host), :where(:root) {
    --vaadin-overlay-border-width: 0px;
    --vaadin-overlay-backdrop-background: light-dark(oklch(from var(--aura-background-color-light) calc(l * 0.1) c h/0.15), rgba(0, 0, 0, .3));
    --aura-overlay-outline-color: light-dark(oklch(from var(--aura-background-color-light) 0.1 c h/max(0.04, 0.03 + 0.04 * var(--aura-contrast-level))), oklch(from var(--aura-background-color-dark) 0.1 c h/max(0.04, 0.03 + 0.04 * var(--aura-contrast-level))));
    --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast-level)));
    --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: 0.85;
    @media (prefers-reduced-transparency: reduce) {
        --aura-overlay-surface-opacity: 1 !important
    }
    --vaadin-popover-border-radius: var(--vaadin-radius-l)
}

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

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

vaadin-progress-bar[dir=rtl]::part(value) {
    scale: -1
}

:where(:host), :where(:root) {
    --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-color) padding-box;
    --aura-surface-level: 4;
    --aura-surface-opacity: 0.7 !important;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .04);

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

vaadin-rich-text-editor::part(toolbar) {
    border-bottom: 1px solid var(--vaadin-border-color-secondary);
    contain: paint
}

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

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

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

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 {
    scale: .95;
    transition-duration: 80ms, 80ms, 50ms
}

@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-value-button {
    font-weight: var(--aura-font-weight-medium)
}

:where(:host), :where(:root) {
    --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::part(label) {
    gap: var(--vaadin-gap-xs);
    transition: color 80ms
}

vaadin-side-nav::part(label):hover {
    color: var(--vaadin-text-color)
}

vaadin-side-nav-item::part(content) {
    --aura-surface-level: 6;
    --aura-surface-opacity: 0.3;
    transition: color 80ms
}

vaadin-side-nav-item:not([disabled],[current])::part(content):active {
    --vaadin-side-nav-item-background: var(--vaadin-background-container)
}

@media (any-hover: hover) {
    vaadin-side-nav-item:not([disabled],[current])::part(content):hover {
        --vaadin-side-nav-item-text-color: var(--vaadin-text-color)
    }
}

vaadin-side-nav-item[current]::part(content) {
    transition: none;
    --_accent-border: color-mix(in srgb, var(--aura-accent-color) 10%, var(--vaadin-border-color-secondary) 50%);
    --vaadin-side-nav-item-background: var(--aura-accent-surface) padding-box;
    --vaadin-side-nav-item-text-color: var(--aura-accent-text-color);
    --vaadin-side-nav-item-border-color: var(--aura-accent-border-color)
}

vaadin-side-nav-item::part(toggle-button), vaadin-side-nav::part(toggle-button) {
    --vaadin-icon-visual-size: 0.9lh
}

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-text-color: var(--aura-accent-contrast-color);
    --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
    --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
    --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
    --vaadin-icon-color: var(--aura-accent-contrast-color);
    outline-offset: 2px
}

vaadin-side-nav-item:not([current]) > vaadin-icon[slot=prefix] {
    opacity: .8
}

:where(:host), :where(:root) {
    --vaadin-tab-border-radius: var(--vaadin-radius-m);
    --vaadin-tab-font-weight: var(--aura-font-weight-medium);
    --vaadin-tabs-gap: 2px;
    --vaadin-tabs-border-radius: calc(var(--vaadin-tab-border-radius) + var(--vaadin-tabs-padding));
    --vaadin-tabs-padding: 3px;
    --vaadin-tabs-border-width: 1px
}

vaadin-tabs {
    contain: paint;
    --aura-surface-level: -1;
    --aura-surface-opacity: 0.3;
    background: var(--vaadin-tabs-background, var(--aura-surface-color))
}

vaadin-tabs::part(tabs) {
    margin: -3px;
    padding: 3px;
    --_mask-fade-start: 0.5lh;
    --_mask-fade-size: 2lh;
    mask-image: linear-gradient(var(--_mask-dir, to right), var(--_mask-start, #000) var(--_mask-fade-start), #000 var(--_mask-fade-size), #000 calc(100% - var(--_mask-fade-size)), var(--_mask-end, #000) calc(100% - var(--_mask-fade-start)))
}

vaadin-tabs[dir=rtl]::part(tabs) {
    --_mask-dir: to left
}

vaadin-tabs[orientation=vertical]::part(tabs) {
    --_mask-dir: to bottom;
    --_mask-fade-start: 0px;
    --_mask-fade-size: 0.5lh
}

vaadin-tabs[overflow~=start] {
    --_mask-start: transparent
}

vaadin-tabs[overflow~=end] {
    --_mask-end: transparent
}

vaadin-tabs::part(back-button), vaadin-tabs::part(forward-button) {
    align-self: center;
    background: var(--aura-surface-color-solid) padding-box;
    border: 1px solid var(--vaadin-border-color);
    border-radius: var(--vaadin-radius-m);
    box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
    height: auto;
    padding: var(--vaadin-padding-xs);
    transition: opacity .12s
}

vaadin-tabs::part(back-button) {
    inset-inline-start: 5px
}

vaadin-tabs::part(forward-button) {
    inset-inline-end: 5px
}

vaadin-tab {
    border: var(--vaadin-tab-border-width, 1px) solid var(--vaadin-tab-border-color, transparent);
    transition: color .12s, border-color .12s, background-color .12s
}

vaadin-tab:not([disabled],[selected]):hover {
    --vaadin-tab-text-color: var(--vaadin-text-color)
}

vaadin-tab[selected] {
    --aura-surface-level: 6;
    --aura-surface-opacity: 0.7;
    --vaadin-tab-background: var(--aura-accent-surface);
    --vaadin-tab-text-color: var(--aura-accent-text-color);
    box-shadow: 0 1px 4px -1px var(--aura-shadow-color)
}

vaadin-tabs[theme~=filled] vaadin-tab[selected] {
    --vaadin-tab-background: var(--aura-accent-color) border-box;
    --vaadin-tab-text-color: var(--aura-accent-contrast-color);
    --vaadin-text-color: var(--aura-accent-contrast-color);
    --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
    --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
    --vaadin-icon-color: var(--aura-accent-contrast-color);
    outline-offset: 1px
}

:where(:host), :where(:root) {
    --vaadin-upload-background: var(--aura-surface-color) 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) {
    flex-wrap: wrap;
    gap: var(--vaadin-gap-s) var(--vaadin-gap-m)
}

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

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

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: 0.75lh;
    border-radius: var(--vaadin-radius-m);
    margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);
    padding-block: var(--vaadin-padding-m);

    &::part(commands), &::part(done-icon), &::part(warning-icon) {
        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 {
        display: block;
        height: var(--vaadin-gap-xs);
        margin-top: var(--vaadin-gap-xs)
    }

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

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

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

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) {
        display: flex;
        flex-direction: column;
        gap: var(--vaadin-gap-s)
    }

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

    vaadin-upload-file {
        background: var(--aura-surface-color) 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(:host), :where(:root) {
    cursor: default;
    --vaadin-aura-theme: 1;
    --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
    --_vaadin-icon-menu: 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="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>')
}

vaadin-icon[icon^="vaadin:"] {
    --vaadin-icon-visual-size: 80%
}