/**
 * Custom Variation Swatches Override Styles
 * Styles for single total count swatch (+X format with max +99)
 * Matches existing swatch styling based on type (color=circle, image=rectangle, button=rounded)
 */

/* Base styling for custom total swatch */
.custom-total-swatch {
  display: inline-block;
  margin: 0;
}

.custom-total-swatch .total-swatch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wvs-archive-product-item-width, 30px);
  height: var(--wvs-archive-product-item-height, 30px);
  padding: 4px 8px;
  text-decoration: none;
  border: 1px solid var(--wvs-item-box-shadow, #a8a8a8);
  background-color: var(--wvs-item-background-color, transparent);
  color: var(--wvs-item-text-color, #000000);
  border-radius: 4px;
  font-size: var(--wvs-archive-product-item-font-size, 16px);
  font-weight: 500;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.custom-total-swatch .total-swatch-text {
  line-height: 1;
  white-space: nowrap;
}

/* COLOR SWATCHES - Circular styling */
.color-variable-items-wrapper .custom-total-swatch {
  border-radius: 9999px;
  padding: 0;
  justify-content: center;
  margin: 4px;
  box-shadow: var(--wvs-item-box-shadow, 0 0 0 1px #a8a8a8);
}

.color-variable-items-wrapper .custom-total-swatch .total-swatch-link {
  width: var(--wvs-archive-product-item-width, 30px);
  height: var(--wvs-archive-product-item-height, 30px);
  padding: 0.5px;
  font-weight: 500;
}

/* IMAGE SWATCHES - Rectangular styling */
.mixed-variable-items-wrapper .custom-total-swatch,
.image-variable-items-wrapper .custom-total-swatch {
  border-radius: 0px;
  padding: 0;
  justify-content: center;
  margin: 4px;
  box-shadow: var(--wvs-item-box-shadow, 0 0 0 1px #a8a8a8);
}

.mixed-variable-items-wrapper .custom-total-swatch .total-swatch-link,
.image-variable-items-wrapper .custom-total-swatch .total-swatch-link {
  border-radius: 0px;
  width: var(--wvs-archive-product-item-width, 30px);
  height: var(--wvs-archive-product-item-height, 30px);
  padding: 8px 6px;
  font-size: var(--wvs-archive-product-item-font-size, 16px);
  font-weight: 500;
}

/* BUTTON SWATCHES - Rounded rectangular styling */
.button-variable-items-wrapper .custom-total-swatch {
  border-radius: 4px;
  padding: 0;
  justify-content: center;
  margin: 4px;
  box-shadow: var(--wvs-item-box-shadow, 0 0 0 1px #a8a8a8);
}

.button-variable-items-wrapper .custom-total-swatch .total-swatch-link {
  border-radius: 4px;
  padding: 8px 6px;
  min-width: auto;
  height: var(--wvs-archive-product-item-height, 30px);
  font-size: var(--wvs-archive-product-item-font-size, 16px);
  font-weight: 500;
}


/* Hover effects */
.custom-total-swatch:hover {
  -webkit-box-shadow: var(--wvs-hover-item-box-shadow, 0 0 0 3px #dddddd);
  box-shadow: var(--wvs-hover-item-box-shadow, 0 0 0 3px #dddddd);
}