/* IconButton - Figma IconButton 仕様に準拠 */
.ui-icon-btn {
  @apply relative inline-flex items-center justify-center cursor-pointer rounded-md outline-none transition-colors;
}

.ui-icon-btn:focus-visible {
  @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-white;
}

/* Size: xs — 24px */
.ui-icon-btn--xs {
  @apply size-6;
}

/* Size: sm — 32px */
.ui-icon-btn--sm {
  @apply size-8;
}

/* Size: md — 40px */
.ui-icon-btn--md {
  @apply size-10;
}

/* Size: lg — 48px */
.ui-icon-btn--lg {
  @apply size-12;
}

/* Color: secondary — インディゴ背景 */
.ui-icon-btn--secondary {
  @apply bg-indigo-100 text-indigo-700;
}

.ui-icon-btn--secondary:hover {
  @apply bg-indigo-200 text-indigo-800;
}

.ui-icon-btn--secondary:active {
  @apply bg-indigo-300 text-indigo-900;
}

/* Color: tertiary — 白背景＋グレーボーダー */
.ui-icon-btn--tertiary {
  @apply border border-gray-200 bg-white text-gray-900;
}

.ui-icon-btn--tertiary:hover {
  @apply bg-gray-50;
}

.ui-icon-btn--tertiary:active {
  @apply bg-gray-100;
}

/* Disabled — 全 color 共通 */
.ui-icon-btn--disabled,
.ui-icon-btn:disabled {
  @apply cursor-not-allowed bg-gray-200 text-white;
}

.ui-icon-btn--disabled:hover,
.ui-icon-btn:disabled:hover {
  @apply bg-gray-200;
}

.ui-icon-btn--disabled.ui-icon-btn--tertiary,
.ui-icon-btn:disabled.ui-icon-btn--tertiary {
  @apply border-gray-200;
}

/* Attention ドット — 右上に配置（Figma 座標準拠） */
.ui-icon-btn__attention {
  @apply absolute -top-0.5 -right-0.5 size-2 rounded-full bg-red-500 pointer-events-none;
}