@layer components {
  .coco-button-wrapper {
    @apply !contents;
  }

  [data-coco].coco-button {
    @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none no-underline outline-none focus-visible:outline-0;
    width: min-content;

    .button-inner {
      @apply inline-flex items-center text-center mx-auto gap-2;
      width: fit-content;
    }

    .button-content {
      @apply whitespace-nowrap relative leading-none inline-flex items-center order-2;
    }

    .button-state-content {
      @apply contents;
    }

    .button-icon {
      @apply inline-flex items-center order-1;
    }

    .button-dropdown {
      @apply contents rounded-md;
    }

    .button-toggle {
      @apply order-3;
    }

    /* disabled */

    &[data-disabled="true"] {
      @apply cursor-not-allowed pointer-events-none;
    }

    /* loading */

    &[data-state="loading"] .button-icon {
      @apply animate-spin;
    }

    /* Fit */

    &[data-fit="full"] {
      @apply w-full;
    }

    /* Icons */

    &[data-icon-position="end"] {
      .button-content {
        @apply order-1;
      }

      .button-icon {
        @apply order-2;
      }

      .button-toggle {
        @apply order-3;
      }
    }

    &.with-icon[data-collapsed="true"] {
      .button-content {
        display: none;
      }
    }
  }
}