@layer components {
  [data-coco][data-component="app-button"] {
    /* Themes */

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

      & > .button-element .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;

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

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

      &[data-state="loading"] > .button-element .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-element .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-element .button-icon {
        @apply text-positive-300;
      }

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

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

      &[data-state="active"] {
        @apply bg-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-element .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;

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

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

      &[data-state="loading"] > .button-element .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-element .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;

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

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

      &[data-state="loading"] > .button-element .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-element .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;

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

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

      &[data-state="loading"] > .button-element .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-element .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-gray-700 active:bg-gray-600;

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

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

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

    &[data-theme="neutral-light"] {
      @apply 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;
        }
      }
    }

    /* Responsive resizing */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer utilities {
  .app-button-sm {
    .button-content {
      @apply text-label-sm;
    }

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

    &[data-theme] {
      .button-element {
        @apply py-2.5 px-4;
      }

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

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

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

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

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

    &[data-theme] {
      .button-element {
        @apply py-3 px-5;
      }

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

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

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

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

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

    &[data-theme] {
      .button-element {
        @apply py-4 px-6;
      }

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

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

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