@tailwind components;

@layer components {
  button[data-slot="button"] {
    @apply text-[1.3rem] transition-opacity hover:opacity-90;
  }
  button[data-slot="button"].primary {
    @apply bg-primary;
  }
  button[data-slot="button"].green {
    @apply bg-[#179d5b];
  }
  button[data-slot="button"].sky {
    @apply bg-[rgba(50,154,203,1)];
  }
  button[data-slot="button"].yellow {
    @apply bg-[rgba(243,201,0,1)] text-[#1e1e1e];
  }
  button[data-slot="button"].orange {
    @apply bg-[#c97600];
  }
  button[data-slot="button"].emerald {
    @apply bg-[#0691d1];
  }
  button[data-slot="button"].white {
    @apply border border-border bg-[rgba(255,255,255,1)] text-[#666];
  }
  button[data-slot="button"].red {
    @apply bg-destructive;
  }
  button[data-slot="button"].gray {
    @apply bg-[#8a8a8a];
  }
  button[data-slot="button"].lightGray {
    @apply bg-[rgba(235,235,235,1)] text-[#707070];
  }

  /* 블랙 테마 버튼 글자색 (onasys 디자인 design/c: 기본 #fff, btn_white #666, btn_gray2 #9e9e9e) */
  [data-theme="black"] {
    button[data-slot="button"].yellow {
      @apply text-[#ffffff];
    }
    button[data-slot="button"].lightGray {
      @apply text-[#9e9e9e];
    }
  }
}