.ra-aside-navigation
  @apply flex flex-col gap-4

.ra-nav-group
  @apply flex flex-col
  @apply gap-1

.ra-nav-label
  @apply text-sm px-2 pb-1 hidden sm:flex

.ra-nav-button,
.ra-nav-link
  @apply flex flex-row gap-2 items-center cursor-pointer
  @apply text-sm font-normal
  @apply p-2 rounded-md

  @apply text-wp-blue-50 dark:text-wp-blue-20
  @apply bg-transparent

  @apply hover:text-wp-blue-70 dark:hover:text-wp-blue-10
  @apply hover:bg-wp-blue-0 dark:hover:bg-wp-blue-70

  @apply focus:text-wp-blue-70 dark:focus:text-wp-blue-10
  @apply focus:bg-wp-blue-0 dark:focus:bg-wp-blue-70
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-wp-blue-50

  @apply transition-all duration-200 ease-in-out

  &.active
    @apply text-wp-gray-5 dark:text-wp-gray-0
    @apply bg-wp-gray-80 dark:bg-wp-gray-90

.ra-nav-button-text,
.ra-nav-link-text
  @apply hidden sm:inline-flex