/* Button Size Classes */
@layer components {
  .size-large {
    /* height: 64px */
    @apply px-10 h-16 text-lg rounded-lg
    before:rounded-lg after:rounded-lg;
  }

  .size-medium {
    /* height: 56px */
    @apply px-10 h-14 text-base rounded-lg
    before:rounded-lg after:rounded-lg;
  }

  .size-small {
    /* height: 48px */
    @apply px-10 h-12 text-sm rounded-lg
    before:rounded-lg after:rounded-lg;
  }

  .size-extra-small {
    /* height: 40px */
    @apply px-6 h-10 text-sm rounded
    before:rounded after:rounded;
  }

  /* Icon Size Classes */
  .size-large .icon,
  .size-medium .icon {
    @apply w-5 h-5;
  }
  .size-small .icon,
  .size-extra-small .icon {
    @apply w-4 h-4;
  }
}