@layer components {
  .ui-button-base {
    @apply inline-flex rounded justify-center items-center gap-3 text-neutral-000 transition-colors focus-base;
  }

  .ui-button-lg-base {
    @apply ui-button-base ui-text-label1 font-semibold h-14 px-7 py-[1.0625rem] gap-3 [&>svg]:!w-6 [&>svg]:!h-6;
  }

  .ui-button-md-base {
    @apply ui-button-base ui-text-label2 font-semibold h-12 px-6 py-[0.8125rem] gap-2.5 [&>svg]:!w-6 [&>svg]:!h-6;
  }

  .ui-button-sm-base {
    @apply ui-button-base ui-text-label3 font-semibold h-10 px-5 py-2.5 gap-2 [&>svg]:!w-5 [&>svg]:!h-5;
  }

  .ui-button-xs-base {
    @apply ui-button-base ui-text-label4 font-semibold h-9 px-3 py-[0.5625rem] gap-1.5 [&>svg]:!w-4 [&>svg]:!h-4;
  }

  .ui-button-disabled-base {
    @apply disabled:cursor-not-allowed disabled:bg-gui-disabled-light disabled:text-gui-disabled-dark disabled:hover:bg-gui-disabled-light;
  }

  .ui-button-disabled-base-dark {
    @apply disabled:cursor-not-allowed disabled:bg-gui-disabled-dark disabled:text-gui-disabled-light disabled:hover:bg-gui-disabled-dark;
  }

  .ui-button-priority-base {
    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
  }

  .ui-theme-dark .ui-button-priority-base {
    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
  }

  .ui-button-primary-base {
    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
  }

  .ui-theme-dark .ui-button-primary-base {
    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
  }

  .ui-button-secondary-base {
    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-disabled-light disabled:text-gui-disabled-light;
  }

  .ui-theme-dark .ui-button-secondary-base {
    @apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-disabled-dark disabled:text-gui-disabled-dark;
  }

  .ui-button-priority-lg {
    @apply ui-button-lg-base ui-button-priority-base;
  }

  .ui-button-priority {
    @apply ui-button-md-base ui-button-priority-base;
  }

  .ui-button-priority-sm {
    @apply ui-button-sm-base ui-button-priority-base;
  }

  .ui-button-priority-xs {
    @apply ui-button-xs-base ui-button-priority-base;
  }

  .ui-button-primary-lg {
    @apply ui-button-lg-base ui-button-primary-base;
  }

  .ui-button-primary {
    @apply ui-button-md-base ui-button-primary-base;
  }

  .ui-button-primary-sm {
    @apply ui-button-sm-base ui-button-primary-base;
  }

  .ui-button-primary-xs {
    @apply ui-button-xs-base ui-button-primary-base;
  }

  .ui-button-secondary-lg {
    @apply ui-button-lg-base ui-button-secondary-base;
  }

  .ui-button-secondary {
    @apply ui-button-md-base ui-button-secondary-base;
  }

  .ui-button-secondary-sm {
    @apply ui-button-sm-base ui-button-secondary-base;
  }

  .ui-button-secondary-xs {
    @apply ui-button-xs-base ui-button-secondary-base;
  }

  .ui-button-lg-left-icon {
    @apply pl-6;
  }

  .ui-button-left-icon {
    @apply pl-5;
  }

  .ui-button-sm-left-icon {
    @apply pl-[1.125rem];
  }

  .ui-button-lg-right-icon {
    @apply pr-6;
  }

  .ui-button-right-icon {
    @apply pr-5;
  }

  .ui-button-sm-right-icon {
    @apply pr-[1.125rem];
  }

  .ui-button-disabled {
    @apply select-none pointer-events-none bg-gui-disabled-light text-gui-disabled-dark hover:bg-gui-disabled-light;
  }

  .ui-theme-dark .ui-button-disabled {
    @apply select-none pointer-events-none bg-gui-disabled-dark text-gui-disabled-light hover:bg-gui-disabled-dark;
  }
}