/*
 * Flair Companion: product options as pills, and options inside a grouped
 * product. Uses only this plugin's Brand Kit properties (--flair-companion-*).
 * Sizes are in rem, and the ones that should follow the screen use clamp().
 */

/* The dropdown stays in the page for WooCommerce and for screen readers. */
.flair-pills__select {
	position: absolute !important;
	width: 0.0625rem;
	height: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.flair-pills {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.375rem, 0.3rem + 0.3vw, 0.625rem);
	margin: 0;
}

.flair-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.25rem;
	padding: clamp(0.3rem, 0.25rem + 0.25vw, 0.5rem) clamp(0.75rem, 0.65rem + 0.4vw, 1.1rem);
	border: 0.0625rem solid var(--flair-companion-color-border);
	border-radius: var(--flair-companion-radius-button,62.4375rem);
	background: var(--flair-companion-color-background);
	color: var(--flair-companion-color-foreground);
	font: inherit;
	font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--flair-companion-motion-fast) var(--flair-companion-motion-ease);
}

.flair-pill:hover {
	border-color: var(--flair-companion-color-primary);
}

.flair-pill:focus-visible {
	outline: 0.125rem solid var(--flair-companion-color-primary);
	outline-offset: 0.125rem;
}

.flair-pill.is-selected {
	border-color: var(--flair-companion-color-primary);
	background: var(--flair-companion-color-primary-subtle);
	color: var(--flair-companion-color-primary-subtle-foreground);
	box-shadow: inset 0 0 0 0.0625rem var(--flair-companion-color-primary);
	font-weight: 600;
}

/* A size or color that is not available for the other choices made. */
.flair-pill.is-unavailable {
	border-style: dashed;
	color: var(--flair-companion-color-muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.flair-pill__dot {
	flex: none;
	width: 1em;
	height: 1em;
	border: 0.0625rem solid var(--flair-companion-color-border);
	border-radius: 50%;
	background: var(--flair-pill-dot);
}

/* ---- Options inside a grouped product's list ---- */
.flair-group-options {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--flair-companion-space-xs);
	width: 100%;
}

.flair-group-options__attribute {
	display: flex;
	flex-direction: column;
	gap: var(--flair-companion-space-3xs);
}

/* The option name looks the same here as above the buttons of a single product:
	 the heading font, semibold, small, in the text color. */
.flair-group-options__attribute > label {
	font-family: var(--flair-companion-font-headings);
	font-weight: 600;
	font-size: var(--flair-companion-font-size-small);
	color: var(--flair-companion-color-foreground);
}

.flair-group-options__quantity .qty {
	width: 4.5rem;
}

/* The Add to cart row of a group that only has products with options. */
.flair-group-submit,
.flair-group-submit > td {
	display: block;
	padding: 0;
	border: 0;
}
.flair-group-submit {
	padding-top: var(--flair-companion-space-sm);
}

/* A group that shows options needs the room, whatever the theme does.
	 WooCommerce's Add to Cart Form block sizes the form to its content, and
	 WooCommerce gives the first cell of a row a width of 4em with centered text.
	 Both are set back, only for a group that has these options, so nothing else
	 changes. */
form.cart.grouped_form:has(.flair-group-options),
.wp-block-woocommerce-add-to-cart-form form.cart.grouped_form:has(.flair-group-options) {
	display: block;
	width: 100%;
}
.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__quantity:has(.flair-group-options) {
	width: auto;
	text-align: left;
}

/* The dropdown of an option when the buttons are switched off: the group's rows
	 are not inside WooCommerce's variations table, so no theme styles reach it. */
.flair-group-options select:not(.flair-pills__select) {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	min-height: 2.75rem;
	padding: 0.5rem 2.75rem 0.5rem 1rem;
	border: 0.0625rem solid var(--flair-companion-color-border);
	border-radius: var(--flair-companion-radius-small,.75rem);
	background-color: var(--flair-companion-color-background);
	color: var(--flair-companion-color-foreground);
	/* The arrow is drawn with the text color, so it follows the Brand Kit. */
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.5rem) 50%,
		calc(100% - 1.1rem) 50%;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
	font: inherit;
	font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
	transition: var(--flair-companion-motion-fast) var(--flair-companion-motion-ease);
}
.flair-group-options select:not(.flair-pills__select):focus-visible {
	border-color: var(--flair-companion-color-primary);
	outline: 0.125rem solid var(--flair-companion-color-primary);
	outline-offset: 0.125rem;
}