menu {
  display: flex;
  flex-direction: row;
  align-items: center;

  .menu-primary {
    position: absolute;
    list-style: none;
    padding: 0;
    top: 0;
    left: 0;
    gap: 0;
    margin-top: calc(var(--spacing-3xl) * 2.25);
    flex-direction: column;
    width: 100%;
    z-index: 3;

    & > li {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 0;
      padding: var(--spacing-sm) 0;
      width: 100%;
      color: var(--text-color);
      background: var(--background-color);

      & a {
        text-decoration: none;
      }

      & .icon > svg,
      & .active > svg {
        display: none;
      }

      & .icon > span,
      & .active > span {
        display: inline;
      }
    }
  }

  #menu-toggle {
    display: none;

    &:checked + .menu-button-container {
      .menu-closed {
        display: none;
      }

      .menu-open {
        display: block;
      }
    }

    &:not(:checked) + .menu-button-container {
      .menu-closed {
        display: block;
      }

      .menu-open {
        display: none;
      }
    }

    & ~ .menu-primary li {
      height: 0;
      border: 0;
      padding: 0;
    }

    &:checked ~ .menu-primary li {
      border-bottom: var(--border-gray);
      height: calc(var(--sizing-3xl) * 1.5);

      &:first-child {
        border-top: var(--border-gray);
      }

      & a,
      & .active {
        font-size: var(--font-size-lg);
      }
    }
  }

  .menu-button-container {
    display: unset;
    width: var(--sizing-svg-base);
    height: var(--sizing-svg-base);

    & svg {
      cursor: pointer;
    }
  }

  @media (min-width: 768px) {
    .menu-primary {
      display: flex;
      flex-direction: row;
      margin: 0;
      gap: var(--spacing-md);
      position: relative;
      top: unset;
      left: unset;
      width: auto;
    }

    .menu-primary > li {
      width: auto;
      height: auto;
      padding: 0;
      background: none;

      & .icon > svg,
      & .active > svg {
        display: block;
      }

      & .icon > span,
      & .active > span {
        display: none;
      }
    }

    #menu-toggle ~ .menu-primary li {
      height: unset;
      border: none;
      padding: 0;
    }

    #menu-toggle:checked ~ .menu-primary li {
      height: unset;
      border: none;

      &:first-child {
        border: none;
      }
    }

    .menu-button-container {
      display: none;
    }
  }
}