style.module.css

.menu {
  @apply relative inline-block text-left;

  & .button {
    @apply inline-flex justify-center items-center w-full py-2 text-neutral-100 rounded-md;
    @apply transition-all duration-100;

    &:hover, &[aria-expanded="true"] {
      @apply bg-neutral-600 text-white;
    }

    &:focus, &:focus-within, &:active {
      @apply ring-2 ring-opacity-50 ring-neutral-300 text-white;
    }

    & svg {
      @apply w-5 h-5 transition-transform duration-75;
    }

    &[aria-expanded="true"] svg[data-animated="true"] {
      @apply rotate-180;
    }
  }

  & .items_container {
    @apply absolute right-0 mt-2 origin-top-right bg-neutral-900 rounded z-10;
  }
}

.menu_item {
  @apply flex items-center rounded w-full px-2 py-2;

  & svg {
    @apply w-4 h-4 mr-4 text-neutral-300;
  }

  &:hover, &:focus {
    @apply bg-blue-500 text-blue-50;

    & svg {
      @apply text-blue-50;
    }
  }

  &.danger {
    &:hover, &:focus {
      @apply bg-red-500 text-red-50;

      & svg {
        @apply text-red-50;
      }
    }
  }

  &.disabled {
    @apply cursor-not-allowed hover:bg-neutral-800 opacity-30 focus:bg-transparent focus:hover:bg-neutral-800;
  }
}