/* Button Size Classes */
@layer components {
  .btn-base {
    @apply overflow-hidden relative inline-flex items-center justify-center font-medium cursor-pointer
    before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
    /* 기본 크기: size-medium */
    px-10 h-14 text-base rounded-lg;
  }
  .btn-base:hover {
    @apply after:opacity-20;
  }
  .btn-base:disabled {
    @apply cursor-default
    after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
  }

  .size-large {
    @apply px-10 h-16 text-lg;
  }

  .size-medium {
    @apply px-10 h-14 text-base;
  }

  .size-small {
    @apply px-10 h-12 text-sm;
  }

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