@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
 * Core styles shipped in all builds.
 * ============================================================ */

.b3-wvs-swatches-container {
  @apply b3-wvs-my-4;
}

/*
 * Prevent WooCommerce table-based layout from stretching swatch containers.
 * Each variation attribute row should size independently based on its own content,
 * not based on sibling rows (e.g., Color swatches shouldn't stretch to match Button/Label widths).
 */
table.variations td .b3-wvs-swatches-container,
.variations td .b3-wvs-swatches-container {
  display: inline-block;
  width: auto;
}

/* Ensure inner swatch wrapper also sizes to content, not parent table cell width */
.b3-wvs-swatches-container .b3-wvs-variation-bg {
  width: fit-content;
}

/* Only hide the original Woo select after swatches initialize (JS mounted). */
.b3-wvs-swatches-container.b3-wvs-initialized .b3-wvs-original-select {
  display: none;
}

/*
 * Normalize theme button styles for swatches.
 * WooCommerce/themes can target buttons with higher specificity than the base reset.
 */
.variations_form .b3-wvs-swatches-container [data-b3-wvs-swatch],
.woocommerce .b3-wvs-swatches-container [data-b3-wvs-swatch],
.b3-wvs-swatches-container [data-b3-wvs-swatch] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  max-width: 100%;
  box-sizing: border-box !important;
  height: var(--b3-wvs-swatch-height, auto) !important;
  min-height: var(--b3-wvs-swatch-height, 0) !important;
  padding: var(--b3-wvs-swatch-padding, 0) !important;
  line-height: 1 !important;
}

/* Normalize typography for text-based swatches (button/label + number). */
.variations_form .b3-wvs-swatches-container [data-b3-wvs-swatch-text],
.woocommerce .b3-wvs-swatches-container [data-b3-wvs-swatch-text],
.b3-wvs-swatches-container [data-b3-wvs-swatch-text] {
  font-size: var(--b3-wvs-swatch-font-size, 14px) !important;
  line-height: 1 !important;
  font-family: var(--b3-wvs-swatch-font-family, inherit) !important;
  font-weight: var(--b3-wvs-swatch-font-weight, 500) !important;
}

/*
 * Suppress default browser focus outline on swatch elements.
 * :focus-visible ensures this only triggers for keyboard navigation, not mouse/touch.
 * The ring utility classes in React handle the accessible focus indicator.
 */
.b3-wvs-swatches-container [role="button"]:focus {
  outline: none;
}

.b3-wvs-swatches-container button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Shared tooltip behavior is static show/hide only. */
.b3-wvs-tooltip {
  animation: none !important;
  transition: none !important;
}