@layer components {
  :root {
    --navbar__title-font-family: var(--typography-page-title__font-family);
    --navbar__title-font-size: var(--typography-page-title__font-size);
    --navbar__title-font-weight: var(--typography-page-title__font-weight);
    --navbar__title-letter-spacing: var(
      --typography-page-title__letter-spacing
    );
    --navbar__title-line-height: var(--typography-page-title__line-height);
    --navbar__title-text-color: var(--color-neutral-700);

    --navbar__title--mobile-font-family: var(--navbar__title-font-family);
    --navbar__title--mobile-font-size: 1.125rem;
    --navbar__title--mobile-font-weight: var(--navbar__title-font-weight);
    --navbar__title--mobile-letter-spacing: var(--navbar__title-letter-spacing);
    --navbar__title--mobile-line-height: var(--navbar__title-line-height);
    --navbar__title--mobile-text-color: var(--navbar__title-text-color);

    --navbar__item-font-family: var(--typography-label-large__font-family);
    --navbar__item-font-size: var(--typography-label-large__font-size);
    --navbar__item-font-weight: var(--typography-label-large__font-weight);
    --navbar__item-letter-spacing: var(
      --typography-label-large__letter-spacing
    );
    --navbar__item-line-height: var(--typography-label-large__line-height);
    --navbar__item-text-color: var(--color-neutral-700);

    --navbar__item-icon-font-size: 1.5rem;
  }

  :root.dark {
    --navbar__title-text-color: var(--color-neutral-100);
    --navbar__item-text-color: var(--color-neutral-100);
  }

  .navbar {
    @apply relative;
    @apply h-11;
    @apply flex justify-between;
  }

  .navbar__title {
    color: var(--navbar__title--mobile-text-color);
    font-family: var(--navbar__title--mobile-font-family);
    font-size: var(--navbar__title--mobile-font-size);
    font-weight: var(--navbar__title--mobile-font-weight);
    letter-spacing: var(--navbar__title--mobile-letter-spacing);
    line-height: var(--navbar__title--mobile-line-height);

    @media (min-width: theme("screens.tablet")) {
      color: var(--navbar__title-text-color);
      font-family: var(--navbar__title-font-family);
      font-size: var(--navbar__title-font-size);
      font-weight: var(--navbar__title-font-weight);
      letter-spacing: var(--navbar__title-letter-spacing);
      line-height: var(--navbar__title-line-height);
    }

    @apply absolute inset-0;
    @apply flex justify-center items-center;
  }

  .navbar__item {
    @apply relative;

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

    &::before {
      /* arrow_back_ios (<) in ltr and arrow_forward_ios (>) in rtl */
      @apply ltr:content-['arrow\_back\_ios'] rtl:content-['arrow\_forward\_ios'];
      @apply material-icons;
      font-size: var(--navbar__item-icon-font-size);
    }
  }
}
