@tailwind components;

@layer components {
  div[role="radiogroup"][data-variant="button"] {
    @apply gap-0 overflow-hidden rounded-sm;
  }
  div[role="radiogroup"][data-variant="button"] button {
    @apply aspect-auto h-auto w-auto rounded-none bg-none px-6 py-2 text-[1.3rem] font-medium transition-[background-color,color] duration-150;
  }

  /* 버튼 색상 */
  div[role="radiogroup"][data-variant="button"][data-color="primary"] {
    @apply border border-primary;
  }
  div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
    @apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white;
  }
  div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
    @apply border border-[#ababab];
  }
  div[role="radiogroup"][data-variant="button"][data-color="secondary"] button {
    @apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
  }

  /* 버튼 모양 */
  div[role="radiogroup"][data-variant="button"][data-shape="rounded"] {
    @apply rounded-full;
  }
  div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
    button {
    @apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary;
  }
  div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"] {
    @apply border-[#7b7b7b];
  }
  div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
    button {
    @apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979];
  }

  [data-theme="black"] {
    div[role="radiogroup"][data-variant="button"][data-color="primary"] {
      @apply border-[#404040];
    }
    div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
      @apply bg-[#505050] text-[#aeb7bf] hover:bg-[#525e69] data-[state=checked]:bg-primary data-[state=checked]:text-white;
    }
    div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
      @apply border-[#808080];
    }
    div[role="radiogroup"][data-variant="button"][data-color="secondary"]
      button {
      @apply bg-[#505050] text-[#a5a5a5] hover:bg-[#444444] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
    }
    div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
      button {
      @apply bg-[#505050] hover:bg-[#525e69] data-[state=checked]:bg-primary;
    }
    div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
      button {
      @apply bg-[#505050] hover:bg-[#444444] data-[state=checked]:bg-[#797979];
    }
  }
}