.btn {
  @apply rounded-btn inline-flex h-12 min-h-[3rem] shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent px-4 text-center;
  font-size: 0.875rem;
  line-height: 1em;
  /* disabled */
  &-disabled,
  &[disabled],
  &:disabled {
    @apply pointer-events-none;
  }

  /* shapes */
  &-square {
    @apply h-12 w-12 p-0;
  }
  &-circle {
    @apply h-12 w-12 rounded-full p-0;
  }
}

/* radio input and checkbox as button */
:where(.btn:is(input[type="checkbox"])),
:where(.btn:is(input[type="radio"])) {
  @apply w-auto appearance-none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
  @apply content-[attr(aria-label)];
}
