@utility navbar-* {
  background-color: --value(--color- *);
  color: --value(--text-bg- *);

  .nav-link,
  .navbar-brand,
  .navbar-toggle {
    color: --alpha(--value(--color-bg- *) / 80%);

    &.active,
    &:hover {
      color: --value(--color-bg- *);
    }
  }
}
@utility navbar-transparent-top {
  @apply transition-colors;
}
@utility navbar-transparent-* {
  background-color: transparent;
  color: --value(--color-bg- *);

  &.scrolled {
    background-color: --value(--color- *);
    @apply shadow-xs;
  }

  .nav-link,
  .navbar-brand,
  .navbar-toggle {
    color: --alpha(--value(--color-bg- *) / 80%);

    &.active,
    &:hover {
      color: --value(--color-bg- *);
    }
  }
}
@utility nav {
  @apply flex space-x-2 rtl:space-x-reverse md:space-x-3 md:rtl:space-x-reverse items-center flex-wrap;

  &.vertical {
    @apply block space-x-0 md:space-x-0 space-y-0;

    .nav-link {
      @apply flex w-full truncate space-x-2 rtl:space-x-reverse px-3 py-2;
    }
  }
}

@utility nav-link {
  @apply inline-flex space-x-1 rtl:space-x-reverse items-center text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 transition duration-150 ease-in-out py-2 leading-5;

  &.bordered {
    @apply border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-300 dark:focus:border-gray-700;
  }

  &.active {
    @apply text-gray-900 dark:text-gray-100;
    &.bordered {
      @apply border-primary-400 dark:border-primary-600;
    }
  }
}

@utility navbar-toggle {
  @apply relative p-2 rounded-lg transition-colors w-8 h-8 lg:hidden;

  &:after {
    @apply content-[""];
    @apply absolute top-0 start-0 end-0 bottom-0;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(107, 114, 128, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
  }

  @variant hover {
    &:after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(55, 65, 81, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    }
  }

  @variant dark {
    &::after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(209, 213, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    }

    @variant hover {
      &:after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
      }
    }
  }
}

@utility navbar {
  @apply relative flex items-center justify-between mx-auto px-4 sm:px-6 lg:px-8 z-10;

  &.transparent {
    @apply bg-transparent;
  }

  .nav {
    &.navbar-collapse {
      @apply hidden;

      &.expand-sm {
        @apply sm:flex;
      }

      &.expand-md {
        @apply md:flex;
      }

      &.expand-lg {
        @apply lg:flex;
      }

      &.expand-xl {
        @apply xl:flex;
      }
    }
  }
}