@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;
      min-width: 1%;
    }

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

    .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;
      }
    }

    /* Floating */

    &[data-floating="true"] {
      @apply shadow-lg;
    }

    /* Themes */

    &[data-theme] {
      @apply transition-all overflow-hidden;
      border-radius: 44px;

      .button-content {
        @apply font-semibold;
      }
    }

    &[data-theme="primary"],
    &[data-theme="positive"] {
      @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700 antialiased;

      &[data-state="loading"] {
        @apply bg-background-primary;
      }

      &[data-state="active"] {
        @apply bg-primary-700;
      }

      &[data-state="loading"] .button-icon {
        @apply text-positive-300;
      }

      &[data-disabled="true"] {
        @apply bg-primary-200;
      }
    }

    &[data-theme="text-primary"],
    &[data-theme="text-positive"] {
      @apply bg-transparent text-content-primary hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-positive-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="secondary"],
    &[data-theme="toolbar"],
    &[data-theme="toolbar-floating"] {
      @apply bg-transparent text-content-dark-1 border-gray-transparent-200 hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-positive-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="toolbar-floating"] {
      @apply bg-white hover:bg-coco-gray-100 active:bg-coco-gray-200 border-coco-gray-300;

      &[data-state="active"] {
        @apply bg-coco-gray-200;
      }
    }

    &[data-theme="text-secondary"],
    &[data-theme="text-toolbar"] {
      @apply bg-transparent text-content-dark-1 hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-positive-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="negative"] {
      @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800 antialiased;

      &[data-state="loading"] {
        @apply bg-background-negative;
      }

      &[data-state="active"] {
        @apply bg-negative-800;
      }

      &[data-state="loading"] .button-icon {
        @apply text-negative-300;
      }

      &[data-disabled="true"] {
        @apply bg-negative-200;
      }
    }

    &[data-theme="text-negative"] {
      @apply bg-transparent text-content-negative hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-negative-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="warning"] {
      @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800 antialiased;

      &[data-state="loading"] {
        @apply bg-background-warning;
      }

      &[data-state="active"] {
        @apply bg-warning-800;
      }

      &[data-state="loading"] .button-icon {
        @apply text-warning-300;
      }

      &[data-disabled="true"] {
        @apply bg-warning-200;
      }
    }

    &[data-theme="text-warning"] {
      @apply bg-transparent text-content-warning hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-warning-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="info"] {
      @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800 antialiased;

      &[data-state="loading"] {
        @apply bg-background-info;
      }

      &[data-state="active"] {
        @apply bg-info-800;
      }

      &[data-state="loading"] .button-icon {
        @apply text-info-300;
      }

      &[data-disabled="true"] {
        @apply bg-info-200;
      }
    }

    &[data-theme="text-info"] {
      @apply bg-transparent text-content-info hover:bg-gray-blend-50 active:bg-gray-blend-100;

      &[data-state="loading"] {
        @apply bg-transparent;
      }

      &[data-state="active"] {
        @apply bg-gray-blend-100;
      }

      &[data-state="loading"] .button-icon {
        @apply text-info-300;
      }

      &[data-disabled="true"] {
        @apply bg-transparent opacity-30;
      }
    }

    &[data-theme="neutral-dark"] {
      @apply bg-background-dark-1 text-content-light-1 hover:bg-coco-gray-700 active:bg-coco-gray-600 antialiased;

      &[data-state="loading"] {
        @apply bg-background-dark-1;
      }

      &[data-state="active"] {
        @apply bg-coco-gray-600;
      }

      &[data-disabled="true"] {
        @apply bg-coco-gray-300;
      }
    }

    &[data-theme="neutral-light"] {
      @apply border border-transparent bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;

      &[data-state="loading"] {
        @apply bg-background-light-1;
      }

      &[data-state="active"] {
        @apply bg-background-light-3;
      }

      &[data-disabled="true"] {
        @apply bg-background-light-1;

        .button-inner {
          @apply opacity-40;
        }
      }
    }

    &[data-theme="text-neutral-light"] {
      @apply bg-transparent text-content-light-1 hover:bg-content-light-1/10 antialiased;

      &[data-state="active"] {
        @apply bg-content-light-1/10;
      }

      &[data-disabled="true"] {
        @apply opacity-30;
      }
    }

    &[data-theme="text-neutral-dark"] {
      @apply bg-transparent text-content-dark-1 hover:bg-content-dark-1/10;

      &[data-state="active"] {
        @apply bg-content-dark-1/10;
      }

      &[data-disabled="true"] {
        @apply opacity-30;
      }
    }

    /* Responsive resizing */

    &[data-size="xs"] {
      @apply button-xs;
    }

    &[data-size="sm"] {
      @apply button-sm;
    }

    &[data-size="md"] {
      @apply button-md;
    }

    &[data-size="lg"] {
      @apply button-lg;
    }

    @media screen(md) {
      &[data-size-md="xs"] {
        @apply button-xs;
      }

      &[data-size-md="sm"] {
        @apply button-sm;
      }

      &[data-size-md="md"] {
        @apply button-md;
      }

      &[data-size-md="lg"] {
        @apply button-lg;
      }
    }

    @media screen(lg) {
      &[data-size-lg="xs"] {
        @apply button-xs;
      }

      &[data-size-lg="sm"] {
        @apply button-sm;
      }

      &[data-size-lg="md"] {
        @apply button-md;
      }

      &[data-size-lg="lg"] {
        @apply button-lg;
      }
    }

    @media screen(xl) {
      &[data-size-xl="xs"] {
        @apply button-xs;
      }

      &[data-size-xl="sm"] {
        @apply button-sm;
      }

      &[data-size-xl="md"] {
        @apply button-md;
      }

      &[data-size-xl="lg"] {
        @apply button-lg;
      }
    }

    @media screen(2xl) {
      &[data-size-xxl="xs"],
      &[data-size-2xl="xs"] {
        @apply button-xs;
      }

      &[data-size-xxl="sm"],
      &[data-size-2xl="sm"] {
        @apply button-sm;
      }

      &[data-size-xxl="md"],
      &[data-size-2xl="md"] {
        @apply button-md;
      }

      &[data-size-xxl="lg"],
      &[data-size-2xl="lg"] {
        @apply button-lg;
      }
    }

    @media screen(max) {
      &[data-size-max="xs"] {
        @apply button-xs;
      }

      &[data-size-max="sm"] {
        @apply button-sm;
      }

      &[data-size-max="md"] {
        @apply button-md;
      }

      &[data-size-max="lg"] {
        @apply button-lg;
      }
    }
  }
}

@layer utilities {
  .button-xs {
    .button-content {
      font-size: 14px;
      line-height: 14px;
    }

    .button-icon [data-component="icon"],
    .button-toggle {
      @apply w-3.5 h-3.5;
    }

    &[data-theme] {
      @apply py-2 px-3;
    }

    &.icon-only .button-icon,
    &[data-collapsed="true"] .button-icon {
      @apply -ml-1 -mr-1;
    }

    &[data-theme|="text"] {
      @apply px-2;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply px-2;
      }
    }
  }

  .button-sm {
    .button-content {
      @apply label-sm;
    }

    .button-icon [data-component="icon"],
    .button-toggle {
      @apply w-4 h-4;
    }

    &[data-theme] {
      @apply py-2.5 px-4;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply -ml-1.5 -mr-1.5;
      }
    }

    &[data-theme|="text"] {
      @apply px-2;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply px-2;
      }
    }
  }

  .button-md {
    .button-content {
      @apply label-md;
    }

    .button-icon [data-component="icon"],
    .button-toggle {
      @apply w-5 h-5;
    }

    &[data-theme] {
      @apply py-3 px-5;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply -ml-2 -mr-2;
      }
    }

    &[data-theme|="text"] {
      @apply px-3;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply px-2;
      }
    }
  }

  .button-lg {
    .button-content {
      @apply label-lg;
    }

    .button-icon [data-component="icon"],
    .button-toggle {
      @apply w-6 h-6;
    }

    &[data-theme] {
      @apply py-4 px-6;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-inner {
        @apply ml-[-8px] mr-[-8px];
      }
    }

    &[data-theme|="text"] {
      @apply px-3;

      &.icon-only .button-icon,
      &[data-collapsed="true"] .button-icon {
        @apply px-3;
      }
    }
  }
}