/* BUTTONS */
/* ======= */

@layer components {
  /* standard button */
  .btn {
    @apply inline-flex items-center justify-center w-auto px-6 py-2 overflow-hidden text-center no-underline cursor-pointer type__nav border__button--radius color__button-primary border__button animation-500;
    text-transform: var(--type__button-capiliziation);

    * {
      @apply type__nav;
      text-transform: var(--type__button-capiliziation);
    }

    &__content {
      @apply flex items-center type__nav;
    }

    /* states */
    &--hover,
    &:hover {
      @apply no-underline opacity-75 border__button--hover;
    }
    &--focus,
    &:focus {
      @apply border__button--focus;
    }
    &--disabled,
    &:disabled {
      @apply opacity-50 cursor-not-allowed;
    }

    /* sizes */
    &--small {
      @apply px-3 type--small;
    }
    &--small > * {
      @apply type--small;
    }
    &--smaller {
      @apply px-3 py-1 type--smaller;
    }
    &--smaller > * {
      @apply type--smaller;
    }
    &--big {
      @apply py-3 type--big px-9;
    }
    &--big > * {
      @apply type--big;
    }

    /* standard colors */
    &--secondary {
      @apply color__button-secondary;
    }
    &--tertiary {
      @apply color__button-tertiary;
    }
    &--neutral {
      @apply color__button-neutral;
    }
    &--plain {
      @apply color__button-plain;
    }

    /* button animations */
    /* - set style for default loading button */
    &--load {
      @apply relative;
    }
    &--loading {
      cursor: wait;
    }
    /* - make sure spinner is spinner */
    &__spinner {
      @apply absolute flex items-center justify-center invisible w-11/12 transform left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit;
      svg {
        @apply m-0 m-auto animate-spin-slow;
      }
    }
    /* - when loading class used, hide content and show spinner */
    &--loading &__content {
      @apply invisible;
    }
    &--loading &__spinner {
      @apply visible;
    }
  }
}
