@layer components {
  .ui-btn {
    @apply text-white bg-cool-black text-label2 font-sans font-semibold inline-block rounded p-btn;
    @apply hover:text-white hover:bg-neutral-1100;
    @apply active:text-white active:bg-neutral-1200;
    @apply focus:text-white focus:bg-cool-black focus-base;
    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
    @apply transition-colors;
    @apply inline-flex items-center justify-center;
  }

  .ui-btn-alt {
    transition: background-position 0.2s;
    background: linear-gradient(
      61.2deg,
      var(--color-active-orange) 5%,
      #fe5215 19%,
      #fc4a13 27%,
      #f73c10 33%,
      #f1280a 39%,
      #e90f04 44%,
      var(--color-red-orange) 50%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;

    @apply text-white text-label2 font-sans font-semibold inline-block rounded p-btn;
    @apply focus-base;
    @apply inline-flex items-center justify-center;
  }

  .ui-btn-alt:hover,
  .ui-btn-alt:focus {
    background-position: 100% 0%;
  }

  .ui-btn-alt:disabled {
    background: linear-gradient(var(--gradient-transparent));
    @apply bg-gui-disabled-light text-mid-grey cursor-not-allowed;
  }

  .ui-btn-invert {
    @apply text-cool-black bg-white text-label2 font-sans font-semibold inline-block rounded p-btn;
    @apply hover:text-white hover:bg-active-orange;
    @apply active:text-white active:bg-red-orange;
    @apply focus:text-white focus:bg-cool-black focus-base;
    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
    @apply transition-colors;
    @apply inline-flex items-center justify-center;
  }

  .ui-btn-secondary {
    @apply text-cool-black bg-white text-label2 font-sans font-semibold inline-block border-btn border-cool-black rounded p-btn;
    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
    @apply active:border-red-orange active:bg-white;
    @apply focus:border-cool-black focus:bg-white focus-base;
    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:bg-white disabled:cursor-not-allowed;
    @apply transition-colors;
    @apply inline-flex items-center justify-center;
  }

  .ui-btn-secondary-invert {
    @apply text-white bg-cool-black text-label2 font-sans font-semibold inline-block border-btn border-mid-grey rounded p-btn;
    @apply hover:text-white hover:border-active-orange;
    @apply active:border-red-orange;
    @apply focus-base;
    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:cursor-not-allowed;
    @apply transition-colors;
    @apply inline-flex items-center justify-center;
  }

  .ui-btn-icon {
    @apply w-6 h-6 mr-4;
  }

  .ui-btn-icon-small {
    @apply w-5 h-5 mr-3;
  }

  .ui-btn-icon-xsmall {
    @apply w-4 h-4 mr-2;
  }
  .ui-btn.ui-btn-disabled,
  .ui-btn-invert.ui-btn-disabled {
    @apply text-mid-grey bg-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
  }

  .ui-btn-secondary.ui-btn-disabled {
    @apply text-gui-disabled-light border-gui-disabled-light bg-white cursor-not-allowed pointer-events-none select-none;
  }

  .ui-btn-secondary-invert.ui-btn-disabled {
    @apply text-gui-disabled-light border-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
  }
}