@layer components {
  .menu {
    --grid-bg: var(--color-palette-charcoal-gray);
    --grid-fg: var(--color-palette-light-silver);
    --area-blendmode: normal;

    /* === MenuTitle Vars === */
    --title-color: var(--grid-fg);
    --title-font: var(--font-mono);
    --title-font-size: var(--typo-size-2xl);
    --title-font-weight: var(--typo-weight-black);
    --title-line-height: 1;
    --title-transform: uppercase;
    --title-spacing: var(--typo-spacing-comfortable);
    --title-hover-fg: var(--primary);
    --title-hover-bg: transparent;
    --title-current-bg: var(--color-tertiary);
    --title-current-fg: var(--grid-bg);
    --title-focus-fg: var(--color-secondary);
    --title-focus-bg: var(--grid-bg);
    --title-transition: none;

    /* === MenuSublinks Vars === */
    --sublink-color: var(--grid-fg);
    --sublink-font: var(--font-mono);
    --sublink-font-size: var(--typo-size-xl);
    --sublink-font-weight: var(--typo-weight-light);
    --sublink-transform: uppercase;
    --sublink-line-height: var(--typo-leading-relaxed);
    --sublink-spacing: var(--typo-spacing-loosest);
    --sublink-hover-fg: var(--color-tertiary);
    --sublink-hover-bg: transparent;
    --sublink-current-fg: var(--grid-bg);
    --sublink-current-bg: var(--color-primary);
    --sublink-focus-fg: var(--color-secondary);
    --sublink-focus-bg: var(--grid-bg);
    --sublink-transition: none;

    /* === MenuSubtitle Vars === */
    --divider-color: var(--grid-fg);
    --divider-width: var(--size-12);
    --divider-height: var(--size-2);
    --divider-font: var(--font-mono);
    --divider-line-height: 1;
    --divider-font-size: var(--typo-size-3xl);
    --divider-padding: 0 var(--typo-spacing-cozy);
    --subtitle-font: var(--font-mono);
    --subtitle-color: var(--grid-fg);
    --subtitle-font-size: var(--typo-size-xl);
    --subtitle-text-transform: uppercase;
    --subtitle-letter-spacing: var(--typo-spacing-snug);
    --subtitle-transition: none;

    pointer-events: none;

    position: fixed;
    z-index: 9;
    top: var(--el-header-height);
    left: 0;

    display: grid;
    grid-auto-columns: 1fr;
    grid-template-areas:
    "area_1"
    "area_2"
    "area_3"
    "area_4"
    "area_5";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);

    width: 100vw;
    height: calc(100vh - var(--el-header-height));

    color: var(--grid-fg);

    visibility: hidden;
    opacity: 0;
    background-color: var(--grid-bg);
    clip-path: inset(0 0 100% 0);

    transition: clip-path 0.35s steps(8, end);


    &.isOpen {
      pointer-events: auto;

      transform: translateY(0);

      visibility: visible;
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }

    &.isClosing {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.25s steps(6, end);

      &.isOpen {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.25s steps(6, end);
      }
    }

    @media screen and (--bp-desktop) {
      display: grid;
      grid-template-areas:
        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
        "area_4 area_4 area_3 area_3 area_3 area_3 area_2"
        "area_5 area_5 area_3 area_3 area_3 area_3 area_2"
        "area_5 area_5 area_3 area_3 area_3 area_3 area_1"
        "area_5 area_5 area_3 area_3 area_3 area_3 area_1";
      grid-template-columns: 2.5fr 1fr 3fr 1.5fr 1fr 1fr 4fr;
      grid-template-rows: 3fr 1fr 2.5fr 1.5fr 2fr;
    }
  }
}