@layer components {
  .header {
    margin-bottom: var(--block-space-double);
    padding: var(--block-space) var(--block-space) var(--block-space-half);

    .header__title {
      font-size: var(--text-medium);
      color: var(--color-theme-cinnamon-dark);
      flex-direction: column;
      font-weight: bold;
      align-items: center;
    }

    @media (min-width: 640px) {
      .header__title {
        flex-direction: row;
        align-items: flex-start;
        column-gap: var(--column-gap, var(--inline-space));
      }
    }

    .nav {
      ul {
        list-style: none;
        padding-inline-start: 0;
        margin: 0
      }

      .nav__links.is-opening {
        animation: slide-down 500ms ease forwards;
      }

      .nav__links.is-closing {
        animation: slide-up 300ms ease forwards;
      }

      @media (prefers-reduced-motion: reduce) {
        .nav__links {
          animation: none !important;
        }
      }

      .nav__links__list {
        margin-block: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1ch;

        li {
          font-size: var(--text-large);
        }

        a,
        .nav__logout {
          text-decoration: none;
          color: var(--color-theme-cinnamon-darker);
          font-weight: bold;

          &:hover {
            color: var(--color-theme-rose-dark);
          }
        }
      }

      .nav__right {
        position: absolute;
        top: var(--block-space);
        right: var(--block-space-double);
        font-size: var(--text-medium);
        color: var(--color-theme-cinnamon-darker);
        font-weight: bold;
        cursor: pointer;
        height: 24px;
        width: 24px;
      }
    }
  }

  .header.menu-border {
    border-bottom: 1px solid var(--color-theme-cinnamon-lightest);
    box-shadow: 4px 12px 12px var(--color-theme-cinnamon-lightest);
  }
}