@layer components {
  [data-coco][data-component="menu"] {
    width: fit-content;
    max-width: 240px;

    .menu-item {
      > * {
        @apply w-full;
      }

      > .coco-button-wrapper > .coco-button,
      > [data-component="button-to"] .coco-button,
      > [data-component="menu-button"] > .coco-button-wrapper > .coco-button {
        @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;

        .button-inner {
          @apply justify-start text-left mx-0;
        }

        .button-content {
          @apply !font-[400];
        }
      }

      .divider {
        @apply my-1.5;
      }
    }

    &[data-size="sm"],
    &[data-size="xs"] {
      @apply py-1.5;

      .menu-item {
        [data-component="button"] {
          @apply px-4 py-2 label-sm;

          .button-inner {
            @apply gap-2;

            > [data-component="icon"] {
              @apply w-4 h-4;
            }
          }
        }
      }
    }

    &[data-size="md"] {
      @apply py-2;

      .menu-item {
        [data-component="button"] {
          @apply px-5 py-2.5 label-md;

          .button-inner {
            @apply gap-2;

            > [data-component="icon"] {
              @apply w-5 h-5;
            }
          }
        }
      }
    }

    .divider {
      @apply h-0 border-t border-coco-gray-300;
    }
  }
}