@import "tailwindcss/theme";
@import "../variables/theme.css";

.sectionNavigation {
  @apply bg-white text-center;

  box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);
}

.sectionNavigation-container {
  padding-block: var(--spacing-12);

  @variant md {
    padding-inline: var(--spacing-16);
  }

  @variant lg {
    padding-inline: var(--spacing-40);
  }
}

.sectionNavigation-selectContainer {
  @apply relative inline-flex items-center;

  gap: var(--spacing-16);
  padding-right: var(--spacing-16);
  padding-left: var(--spacing-8);

  @variant lg {
    @apply hidden;
  }
}

.sectionNavigation-select {
  @apply w-full cursor-pointer appearance-none;

  padding-right: var(--spacing-40);
  padding-left: var(--spacing-8);
}

.sectionNavigation-selectIcon {
  --color-icon: var(--color-neutral-900);

  @apply pointer-events-none absolute top-0 right-16;
}

.sectionNavigation-navContainer {
  @apply hidden;

  padding: var(--spacing-8);
  font: var(--t4-medium);

  @variant lg {
    @apply block;
  }
}

.sectionNavigation-navList {
  @apply flex flex-wrap content-center justify-center gap-32;
}

.sectionNavigation-active {
  @apply text-blue-500;
}