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

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

    .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;
        font-weight: bold;
        gap: 1ch;

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

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

          &: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;
      }
    }

    .nav__bell {
      position: absolute;
      top: var(--block-space);
      right: calc(var(--block-space-double) * 2);
    }

    .nav__bell-button {
      background: transparent;
      border: 0;
      padding: 0.4em;
      display: inline-flex;
      align-items: center;
      height: 24px;

      img {
        block-size: 24px;
      }
    }

    .nav__bell-dot {
      position: absolute;
      inset-block-start: 0.25em;
      inset-inline-end: 0.25em;
      inline-size: 0.6em;
      block-size: 0.6em;
      border-radius: 999px;
      background-color: var(--color-theme-rose-medium);
      pointer-events: none;
    }
  }

  @media (min-width: 640px) {
    .header {
      padding: var(--block-space);

      .header__title {
        flex-direction: row;
        align-items: flex-start;
        column-gap: var(--column-gap, var(--inline-space));
      }
    }

    .nav {
      .nav__bell {
        right: calc(var(--block-space-double) * 2.2);
      }
    }
  }

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