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

/* Aligned with App Layout overlay breakpoint */
@media (width <= 800px), (height <= 600px) {
  :where(:root),
  :where(:host) {
    --aura-app-layout-inset: 0px !important;
  }

  vaadin-app-layout {
    --_app-layout-border-width: 0px;
  }
}

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

vaadin-app-layout[overlay]::part(drawer) {
  background: var(--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-drawer]) {
  padding-inline-start: var(--aura-app-layout-inset);
}

vaadin-app-layout::part(navbar) {
  background: var(--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);
  --vaadin-scroller-padding-block: var(--vaadin-padding-s);
  scrollbar-width: thin;
  padding-inline-start: max(0px, var(--vaadin-padding-m) - var(--safe-area-inset-inline-start));
}

vaadin-app-layout::part(content) {
  color-scheme: var(--aura-content-color-scheme);
  color: var(--vaadin-text-color);
  background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
  background-clip: padding-box;
  background-origin: border-box;
  min-height: 1lh;
  box-sizing: border-box;
  border-radius: var(--_app-layout-radius);
  border: min(var(--aura-app-layout-inset), var(--_app-layout-border-width)) solid var(--vaadin-border-color-secondary);
}

vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])::part(content) {
  border-inline-start-width: var(--_app-layout-border-width);
}

vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])::part(content) {
  border-start-start-radius: var(--aura-app-layout-radius);
}

vaadin-app-layout[has-navbar]::part(content) {
  border-top-width: var(--_app-layout-border-width);
}

vaadin-drawer-toggle {
  --aura-accent-color-light: var(--aura-neutral);
  --aura-accent-color-dark: var(--aura-neutral);
}