/* Main sections */
body, :host {
  font: var(--theme-font-body);
  background-color: var(--theme-color-body);
  color: var(--theme-color-body-content);
}

body {
  min-height: 100vh;
  display: grid;
  grid-template: 'main' 1fr;
  gap: var(--length-gap-group);

  /* Grid areas */
  & > :is(header, main, aside, footer) { padding: var(--length-gap-group); }
  & > header { grid-area: header; padding-block-end: 0; }
  & > main { grid-area: main; position: relative; }
  & > aside { grid-area: aside; padding-inline-start: 0; }
  & > footer { grid-area: footer; padding-block-start: 0; }

  /* Grid layout */
  &:has(> header) {
    grid-template:
      'header' auto
      'main' 1fr;
    & > :is(main, aside) { padding-block-start: 0; }
  }

  &:has(> aside) {
    grid-template: 'main aside' 1fr;
    & > main { padding-inline-end: 0; }
  }

  &:has(> footer) {
    grid-template:
      'main' 1fr
      'footer' auto;
    & > :is(main, aside) { padding-block-end: 0; }
  }

  &:has(> header):has(> footer) {
    grid-template:
      'header' auto
      'main' 1fr
      'footer' auto;
  }

  &:has(> header):has(> aside) {
    grid-template:
      'header header' auto
      'main aside' 1fr
      / var(--split-golden-ratio);
  }

  &:has(> footer):has(> aside) {
    grid-template:
      'main aside' 1fr
      'footer footer' auto
      / var(--split-golden-ratio);
  }

  &:has(> header):has(> aside):has(> footer) {
    grid-template:
      'header header' auto
      'main aside' 1fr
      'footer footer' auto
      / var(--split-golden-ratio);
  }
}

/* Links */
a {
  text-decoration: none;
  color: var(--theme-color-body-content-active);
  &:hover { color: var(--theme-color-body-content-active-highlight); }
  &:active { color: var(--theme-color-body-content-active-hit); }
}

/* Text elements */
code, kbd, samp, pre { font: var(--theme-font-body-code); }

/* Headings */
h1, .title {
  text-align: center;
  font: var(--theme-font-title);
}

hgroup :is(h1, .title) ~ p, .subtitle {
  text-align: center;
  font: var(--theme-font-subtitle);
}

h2, .heading {
  text-align: start;
  font: var(--theme-font-heading);
}

h3, .subheading {
  text-align: start;
  font: var(--theme-font-subheading);
}

/* Sections */
article, section {
  padding: var(--length-gap-section);
  border-radius: var(--length-radius-group);
}

article {
  margin: 0 auto;
}

/* Buttons */
button, .button {
  display: block;
  cursor: pointer;
  width: max-content;
  padding: var(--length-gap-element);
  background-color: transparent;
  color: var(--theme-color-body-content);
  border-radius: var(--length-radius-element);
  border: var(--length-edge-element) solid transparent;
  font: var(--theme-font-body-emphasis);
  text-align: center;

  &:hover { color: var(--theme-color-body-content-active-highlight); }
  &:active { color: var(--theme-color-body-content-active-hit); }

  svg {
    width: auto;
    max-width: none;
  }

  &.disabled {
    cursor: default;
    color: var(--theme-color-body-content-disabled);
    &:hover { color: var(--theme-color-body-content-disabled); }
    &:active { color: var(--theme-color-body-content-disabled); }
  }

  /* Subtypes */
  &.active, &.neutral, &.danger {
    padding: var(--length-gap-element) var(--length-gap-group);
    font: var(--theme-font-body);
  }

  &.active {
    background-color: var(--theme-color-active);
    color: var(--theme-color-active-content);
    border-color: var(--theme-color-active-outline);

    &:hover {
      background-color: var(--theme-color-active-highlight);
      color: var(--theme-color-active-highlight-content);
      border-color: var(--theme-color-active-highlight-outline);
    }

    &:active {
      background-color: var(--theme-color-active-hit);
      color: var(--theme-color-active-hit-content);
      border-color: var(--theme-color-active-hit-outline);
    }
  }

  &.neutral {
    background-color: var(--theme-color-neutral);
    color: var(--theme-color-neutral-content);
    border-color: var(--theme-color-neutral-outline);

    &:hover {
      background-color: var(--theme-color-neutral-highlight);
      color: var(--theme-color-neutral-highlight-content);
      border-color: var(--theme-color-neutral-highlight-outline);
    }

    &:active {
      background-color: var(--theme-color-neutral-hit);
      color: var(--theme-color-neutral-hit-content);
      border-color: var(--theme-color-neutral-hit-outline);
    }
  }

  &.danger {
    background-color: var(--theme-color-danger);
    color: var(--theme-color-danger-content);
    border-color: var(--theme-color-danger-outline);

    &:hover {
      background-color: var(--theme-color-danger-highlight);
      color: var(--theme-color-danger-highlight-content);
      border-color: var(--theme-color-danger-highlight-outline);
    }

    &:active {
      background-color: var(--theme-color-danger-hit);
      color: var(--theme-color-danger-hit-content);
      border-color: var(--theme-color-danger-hit-outline);
    }
  }

  /* Icons */
  &.icon {
    width: auto;
    padding: var(--length-gap-element);

    svg {
      width: var(--length-button-icon);
      height: var(--length-button-icon);
    }

    &.toggle {
      .inactive { display: block; }
      .active { display: none; }
    }

    &.text {
      display: flex;
      align-items: center;
      gap: var(--length-gap-element);

      & > span {
        position: relative;
        top: var(--font-button-icon-text-vertical-shift);
      }

      &.icon-leading {
        display: grid;
        grid-template-columns: var(--length-button-icon) auto var(--length-button-icon);
        align-items: center;
        gap: var(--length-gap-element);
        & > span { top: 0; }
      }
    }

    &.dropdown {
      width: max-content;
      display: flex;
      gap: var(--length-gap-subelement);
      align-items: center;
      margin-inline-end: calc(-1 * var(--length-gap-element));

      .open > & svg { transform: rotate(-180deg); }
      &.horizontal svg { transform: rotate(-90deg); }
    }
  }
}

.button-group {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--length-gap-group);
  align-items: center;

  &.horizontal { flex-direction: row; }
}

/* Navigation */
nav {
  display: grid;
  grid-template: 'logo menu aside' / 1fr auto 1fr;
  align-items: center;
  gap: var(--length-gap-group);

  /* Logo */
  .logo {
    grid-area: logo;
    justify-self: start;

    /* stylelint-disable no-descending-specificity */
    img, svg { height: var(--length-nav-logo-height); }
    svg { fill: currentcolor; }
    /* stylelint-enable no-descending-specificity */

    &:hover { color: var(--theme-color-body-content); }
    &:active { color: var(--theme-color-body-content); }

    &.flush :is(img, svg) {
      margin-inline-start: calc(-1 * (var(--length-gap-element) + var(--length-edge-element)));
    }
  }

  /* Desktop menu & aside */
  & > :is(menu, aside) {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    gap: var(--length-gap-group);
  }

  & > menu {
    grid-area: menu;
    justify-self: center;
  }

  & > aside {
    grid-area: aside;
    justify-self: end;
  }

  /* Desktop menu items */
  & > menu li menu, & > aside > menu > li menu {
    margin-block-start: var(--length-gap-element);

    form { display: none; }

    /* Sub-submenu */
    menu {
      top: 0;
      left: 100%;
      margin-block-start: calc(-1 * (var(--length-gap-element) + var(--length-edge-element)));
      margin-inline-start: calc(var(--length-gap-element) + var(--length-gap-element));
    }
  }

  /* Mobile menu */
  & > .menu-mobile-container {
    position: relative;
    display: none;
    grid-area: menu-icon;

    & > menu {
      margin-block-start: var(--length-gap-element);
      display: none;
      right: 0;

      &.open { display: block; }
      menu.popover { position: relative; }

      /* Submenu */
      & > li > menu.popover {
        background-color: var(--theme-color-body);
        border: var(--length-edge-element) solid var(--theme-color-body-outline);
      }

      /* Items */
      li :is(button, .button) { min-width: 100%; }
    }
  }

  /* Desktop & mobile menu items */
  & > menu li, & > aside > menu li, & > .menu-mobile-container > menu li {
    position: relative;

    menu { display: none; }
    button, .button { text-align: inherit; }

    &.open {
      & > menu, & > form, & > form > menu { display: block; }
      & > button { color: var(--theme-color-body-content-active-hit); }
      & > button:hover { color: var(--theme-color-body-content-active-highlight); }
    }

    & > :is(button, .button):is(.active, .neutral, .danger) {
      margin-block: var(--length-gap-element);
    }

    &:first-child > :is(button, .button):is(.active, .neutral, .danger) { margin-block-start: 0; }
    &:last-child > :is(button, .button):is(.active, .neutral, .danger) { margin-block-end: 0; }
  }

  /* Language switcher */
  .language-switcher {
    button.dropdown { display: block; }
    button.compact { display: none; }
    menu li:has(.button.disabled) { display: none; }
  }
}

/* Dialogs */
.popover {
  position: absolute;
  z-index: 1000;
  padding: var(--length-gap-element);
  background-color: var(--theme-color-popover);
  border: var(--length-edge-element) solid var(--theme-color-popover-outline);
  border-radius: var(--length-radius-element);
  color: var(--theme-color-popover-content);

  &.notification {
    /* Positioning */
    position: absolute;
    z-index: 500;
    top: var(--length-gap-group);
    left: 50%;
    transform: translateX(-50%);

    /* Layout */
    display: flex;
    flex-flow: column nowrap;
    gap: var(--length-gap-group);
    padding: var(--length-gap-group);
    border-radius: var(--length-radius-group);

    /* Contents */
    ul {
      display: flex;
      flex-flow: column nowrap;
      gap: var(--length-gap-element);
      text-align: center;
    }

    button { margin-inline: auto; } /* stylelint-disable-line no-descending-specificity */
  }
}

/* Example elements */
.example-page {
  width: 30rem;
  min-height: 15rem;
  padding: var(--length-gap-group);
  color: var(--theme-color-popover-content);
  &.wide { width: 100rem; }
  &.highlight { background-color: var(--theme-color-popover); }
}

.example-section {
  background-color: var(--theme-color-section);
  color: var(--theme-color-section-content);
  height: 5rem;
}

.example-block {
  width: 10rem;
  height: 5rem;
  background-color: var(--theme-color-section);
  color: var(--theme-color-section-content);
}