@layer components {
  /* === MenuGrid === */

  .menu {
    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);
    gap: 0;
    gap: var(--spacing-cozy);

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

    visibility: hidden;
    opacity: 0;
    background-color: var(--color-palette-charcoal-gray);

    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;

    &.isOpen {
      pointer-events: auto;
      visibility: visible;
      opacity: 1;
    }

    @media screen and (--bp-tablet) {
      @mixin px var(--spacing-comfortable);

      grid-template-areas:
        "area_1"
        "area_2"
        "area_3"
        "area_4"
        "area_5";
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: var(--spacing-comfortable);
    }

    @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;
    }
  }

  /* === MenuArea === */
  .area {
    /* === AREA VARIABLES === */
    --area-bg: transparent;
    --area-border: transparent;
    --area-animation-keyframe: none;
    --area-animation-duration: 0s;
    --area-animation-timing: linear;
    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);

    /** === TITLE VARIABLES === */
    --title-color: var(--color-palette-light-silver);
    --title-font: var(--font-header);
    --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-color: var(--color-tertiary);
    --title-current-color: var(--color-primary);
    --title-current-bg: var(--color-primary);

    /** === SUBLINK VARIABLES === */;
    --sublink-color: var(--color-palette-light-silver);
    --sublink-font: var(--font-header);
    --sublink-font-size: var(--typo-size-2xl);
    --sublink-font-weight: var(--typo-weight-black);
    --sublink-transform: uppercase;
    --sublink-spacing: var(--typo-spacing-relaxed);
    --sublink-line-height: var(--typo-leading-relaxed);
    --sublink-letter-spacing: var(--typo-spacing-relaxed);
    --sublink-current-color: var(--color-primary);
    --sublink-current-bg: var(--color-primary);

    /** === SUBTITLE VARIABLES === **/
    --divider-color: var(--color-palette-light-silver);
    --divider-width: var(--size-6);
    --divider-height: var(--size-2);
    --divider-font: var(--font-mono);
    --divider-symbol: ⯆;
    --divider-font-size: var(--typo-size-2xl);
    --divider-padding: 0 var(--typo-spacing-cozy);
    --subtitle-color: var(--color-palette-light-silver);
    --subtitle-font: var(--font-mono);
    --subtitle-font-size: var(--typo-size-2xl);
    --subtitle-text-transform: uppercase;
    --subtitle-letter-spacing: var(--typo-spacing-cozy);

    position: relative;

    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: var(--size-1) solid var(--area-border);

    text-align: center;

    background: var(--area-bg);

    transition: all 0.2s ease-in-out;

    &:not(.current) {
      &:hover {
        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
      }
    }
  }

  .area_1 { grid-area: area_1; }
  .area_2 { grid-area: area_2; }
  .area_3 { grid-area: area_3; }
  .area_4 { grid-area: area_4; }
  .area_5 { grid-area: area_5; }

  .hasBGImg {
    &:hover {
      .bgImg {
        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
      }
    }
  }

  .bgImg {
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;

    object-fit: cover;
    filter: var(--area-bg-filter);

    @media screen and (--bp-tablet-down) {
      display: none;
    }
  }

  /* === MenuTitle === */
  .title {
    position: relative;
  }

  .mainlink {
    position: relative;

    font-family: var(--title-font);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--title-color);
    text-transform: var(--title-transform);
    letter-spacing: var(--title-spacing);

    transition: any 0.5s ease-in-out;

    &:focus {
      &:hover {
        color: var(--title-current-color);
      }

      @media screen and (--bp-tablet-down) {
        outline: none;

        &:hover {
          color: var(--title-current-color);
        }
      }
    }

    &.current {
      pointer-events: none;

      @media screen and (--bp-tablet-down) {
        &:hover {
          color: var(--title-current-color);
        }
      }

      @media screen and (--bp-desktop) {
      }
    }

    @media screen and (--bp-tablet-down) {
      transition: border 0.5s ease-in-out;
    }
  }

  /* === MenuSublinks === */
  .list {
    @media screen and (--bp-tablet-down) {
      display: none;
    }
  }

  .item {
    position: relative;
  }

  .sublink {
    position: relative;

    font-family: var(--sublink-font);
    font-size: var(--sublink-font-size);
    font-weight: var(--sublink-font-weight);
    line-height: var(--sublink-line-height);
    color: var(--sublink-color);
    text-transform: var(--sublink-transform);
    letter-spacing: var(--sublink-spacing);;

    &:not(.current),
    &:not(.focus) {
      transition: var(--sublink-hover-transition);

      &::after,
      &::before {
        position: absolute;
        font-family: var(--sublink-hover-decorator-font);
        opacity: 0;
        transition: var(--sublink-hover-decorator-transition);
      }

      &::before {
        content: var(--sublink-hover-decorator-left-symbol);
        left: 0;
      }

      &::after {
        content: var(--sublink-hover-decorator-right-symbol);
        right: 0;
      }

      &:hover {
        color: var(--sublink-hover-color);

        &::before {
          top: var(--sublink-hover-decorator-left-pos-y);
          left: var(--sublink-hover-decorator-left-pos-x);
          transform: var(--sublink-hover-decorator-left-transform);
          opacity: 1;
        }

        &::after {
          top: var(--sublink-hover-decorator-right-pos-y);
          right: var(--sublink-hover-decorator-rightt-pos-x);
          transform: var(--sublink-hover-decorator-right-transform);
          opacity: 1;
        }
      }

      &:focus {
        &:hover {
          color: var(--sublink-current-color);
        }
      }

      &.current {
        pointer-events: none;
      }
    }
  }

  /* === MenuSubtitle === */
  .wrapper {
    position: relative;

    @media screen and (--bp-tablet-down) {
      display: none;
    }
  }

  /* === UTILITY Classes */
  @media screen and (--bp-desktop) {
    .pos_tr {
      position: absolute;
      top: 1em;
      right: 1em;
    }

    .pos_tc {
      position: absolute;
      top: 1em;
      left: 50%;
      transform: translateX(-50%);
    }

    .pos_tl {
      position: absolute;
      top: 1em;
      left: 1em;
    }

    .pos_cr {
      position: absolute;
      top: 50%;
      right: 1em;
      transform: translateY(-50%);
    }

    .pos_c {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
    }

    .pos_cl {
      position: absolute;
      top: 50%;
      right: 1em;
      transform: translateY(-50%);
    }

    .pos_br {
      position: absolute;
      right: 1em;
      bottom: 1em;
    }

    .pos_bc {
      position: absolute;
      bottom: 1em;
      left: 50%;
      transform: translateX(-50%);
    }

    .pos_bl {
      position: absolute;
      bottom: 1em;
      left: 1em;
    }

    .vertical-rl {
      writing-mode: vertical-rl;

      & * {
        writing-mode: vertical-rl;
      }
    }

    .vertical-lr {
      writing-mode: vertical-lr;

      & * {
        writing-mode: vertical-lr;
      }
    }

    .sideways-rl {
      writing-mode: sideways-rl;

      & * {
        writing-mode: sideways-rl;
      }
    }

    .sideways-lr {
      writing-mode: sideways-lr;

      & * {
        writing-mode: sideways-lr;
      }
    }
  }

  /* === CATEGORY Variants === */
  @media screen and (--bp-desktop) {
    .meta {}
    .kitchensink {}
    .awq {}
    .worldburner {}
    .chainbreaker {}
  }
}