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

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-color), var(--aura-surface-color)), var(--aura-app-background);
  background-clip: padding-box;
  background-origin: border-box;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: var(--_app-layout-radius);
  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));
}

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

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

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

  & > 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-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);
}

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