@layer components {
  .nav-bar__container {
    --row-position: sticky;
    --nav-bar-color: var(--color-canvas);
    --nav-bar-background-color: var(--color-text);

    grid-area: nav-bar;
    top: var(--nav-bar-top, auto);
    bottom: var(--nav-bar-bottom, 0);
    width: 100%;
    z-index: 100;
    color: var(--nav-bar-color);
    background-color: color-mix(in oklab, transparent 50%, var(--nav-bar-background-color));
    backdrop-filter: var(--backdrop-blur);

    @media (width >= 48rem) {
      --nav-bar-background-color: var(--color-canvas);
      --nav-bar-color: var(--color-text);

      top: 0;
      bottom: auto;
    }
  }

  .nav-bar {
    height: 4rem;
    display: grid;
    grid-template: "start middle end" / minmax(max-content, 1fr) max-content minmax(max-content, 1fr);
    align-items: center;
    justify-content: space-between;

    @media (width >= 48rem) {
      height: 5rem;
      gap: var(--inline-space);
    }
  }

  .nav-bar__item {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--inline-space);

    &.nav-bar__item--start {
      grid-area: start;
    }

    &.nav-bar__item--middle {
      grid-area: middle;
    }

    &.nav-bar__item--end {
      grid-area: end;
      justify-content: end;
    }
  }

  .mobile-header {
    grid-area: mobile-header;
    display: flex;
    flex-direction: column;
    place-items: center;
    margin-block-start: var(--block-space);

    @media (width >= 48rem) {
      display: none;
    }
  }

  .global-announcement {
    grid-area: announcement;
    padding: var(--global-announcement-padding, var(--block-space));
    text-align: var(--global-announcement-text-align, center);
    color: var(--global-announcement-color, var(--color-canvas));
    background-color: var(--global-announcement-background, var(--color-highlight));
    font-family: var(--global-announcement-font, var(--font-header));
    text-box: var(--global-announcement-text-box, var(--text-box-font-header));
  }
}