.btn {
  @apply inline-flex min-w-[80px] flex-shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded px-3 font-bold;

  /* default */
  @apply font-14-bold py-[9.5px];

  &-full {
    @apply w-full;
  }

  &-rounded {
    @apply rounded-full;
  }

  &-lg {
    @apply font-16-bold h-12 py-3;
  }

  &-md {
    @apply font-14-bold h-10 py-[9.5px];
  }

  &-sm {
    @apply font-12-bold h-8 py-[7px];
  }

  &-xs {
    @apply font-12-bold py-1;
  }

  &-primary {
    @apply bg-fill-primary text-inverse;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--fill-color-primary),
        transparent 20%
      );
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
      svg {
        @apply text-tertiary;
      }
    }
  }

  &-secondary {
    @apply bg-fill-inverse text-primary border-fill-tertiary relative overflow-hidden border;

    &:hover::after {
      content: '';
      background-color: #0000001f;
      @apply absolute inset-0;
    }

    &:disabled {
      @apply text-tertiary pointer-events-none;
    }
  }

  &-tertiary {
    @apply text-primary;

    &:hover {
      @apply bg-fill-tertiary;
    }

    &:disabled {
      @apply text-tertiary pointer-events-none;
    }
  }

  &-red {
    @apply bg-red-primary text-white;

    &:hover {
      @apply bg-red-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-orange {
    @apply bg-orange-primary text-white;

    &:hover {
      @apply bg-orange-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-yellow {
    @apply bg-yellow-primary text-white;

    &:hover {
      @apply bg-yellow-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-green {
    @apply bg-green-primary text-white;

    &:hover {
      @apply bg-green-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-blue {
    @apply bg-blue-primary text-white;

    &:hover {
      @apply bg-blue-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-navy {
    @apply bg-navy-primary text-white;

    &:hover {
      @apply bg-navy-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-purple {
    @apply bg-purple-primary text-white;

    &:hover {
      @apply bg-purple-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }
}
