@layer components {
  .sections-nav {
    @apply text-gray-300 p-4 flex justify-center;

    > div {
      @apply flex space-x-2;
    }

    .pill {
      @apply border rounded-full px-4 py-2 transition-colors duration-200 text-center cursor-pointer;

      &[data-state="active"] {
        @apply text-white cursor-default;
      }

      &.album {
        @apply text-purple-600 border-purple-600 hover:bg-purple-600;

        &[data-state="active"] {
          @apply bg-purple-600 border-purple-600 text-white;
        }

      }

      &.rarities {
        @apply text-teal-600 border-teal-600 hover:bg-teal-600;

        &[data-state="active"] {
          @apply bg-teal-600 border-teal-600 text-white;
        }

      }

      &.performances {
        @apply text-amber-600 border-amber-600 hover:bg-amber-600;

        &[data-state="active"] {
          @apply bg-amber-600 border-amber-600 text-white;
        }

      }

      &.interviews {
        @apply text-red-600 border-red-600 hover:bg-red-600;

        &[data-state="active"] {
          @apply bg-red-600 border-red-600 text-white;
        }

      }

      &.articles {
        @apply text-green-600 border-green-600 hover:bg-green-600;

        &[data-state="active"] {
          @apply bg-green-600 border-green-600 text-white;
        }

      }

      &:hover {
        @apply text-white;
      }
    }
  }
}