.variant-select {
	border: 0;
	margin: 0;
	padding: 0;
}

variant-radios, product-bundle-variant-radios {
	display: flex;
	flex-direction: row;
	margin-bottom: 2.4rem;
	gap: 1rem;

	@media (min-width: 750px) {
		margin-bottom: 1rem;
	}


	.product-form__controls {
		flex-basis: 50%;
	}
}

variant-siblings {
	display: block;
	width: calc(50% - 0.5rem);

	a {
		text-decoration: none;
	}
}

.variant-select {
	width: 100%;
	position: relative;

	.product-form__controls-group {
		gap: 0;
	}

	.select__select {
		background-color: rgba(var(--color-white));
		border-radius: 7px;

		width: 100%;
		min-height: 5.6rem;
		font-weight: 300;
		padding: 1.6rem;
		font-family: var(--font-body-family);
		font-style: var(--font-body-style);
		font-size: 1.6rem;
		-webkit-appearance: none;
		appearance: none;
		text-align: left;
		color: rgb(var(--color-foreground-title));
		border: 0.1rem solid rgba(var(--color-drawer-gray));
		border-radius: 0.4rem;
		box-sizing: border-box;
		transition: border var(--duration-default), background-color var(--duration-default);
		overflow: hidden;

		display: flex;
		gap: 1rem;
		align-items: center;

		&::placeholder {
			transition: color var(--duration-default);
			color: rgba(var(--color-foreground-secondary));
		}

		&.empty {
			margin-left: 2px;
			padding-inline: 0;
			padding-block: 0.5rem;
			border: none;
			background: transparent;
			min-height: auto;
			pointer-events: none;

			.icon.icon-caret {
				display: none
			}
		}

		&:not(.empty) {

			&:hover {
				background-color: rgb(var(--color-background-input-hover));
				cursor: pointer;
			}

			&.disabled {
				background-color: rgb(var(--color-background-input-hover));
				cursor: not-allowed;
			}

			&:hover::placeholder {
				color: rgba(var(--color-foreground-secondary), 0.7);
			}

			&:focus {
				border-color: rgb(var(--color-border-input-hover));
			}

		}

		&:focus-visible,
		&:focus {
			outline: none;
		}

		& > .color-swatch {
			width: 2rem;
			height: 2rem;
			border-radius: 99px;
			border: 0.5px solid black;
			background-color: var(--swatch-color);
		}

	}

	.icon-caret {
		width: 2rem;
		height: 2rem;
		position: absolute;
		pointer-events: none;
		top: 50%;
		transform: translateY(-50%) rotate(90deg);
		right: 2rem;
		transition: var(--duration-default);
	}

	.variant-dropdown {
		position: absolute;
		background-color: rgba(var(--color-white));
		display: flex;
		flex-direction: column;
		list-style-type: none;
		width: 100%;
		z-index: 2;
		border: 0.1rem solid rgba(var(--color-drawer-gray));
		border-radius: 7px;
		padding: 0;
		margin: 0;
		top: 0;
		right: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(10%);
		transition: transform var(--duration-default) ease-in-out, opacity var(--duration-short) linear;

		&.dropdown-open {
			opacity: 100;
			pointer-events: all;
			transform: translateY(0);
		}

		.variant-item {
			display: flex;
			width: 100%;
			transition: background var(--duration-short) ease-in-out;

			&:hover {
				background-color: rgba(var(--color-background-input));
			}

			input {
				clip: rect(0, 0, 0, 0);
				overflow: hidden;
				position: absolute;
				height: 1px;
				width: 1px;

				& + label {
					transition: border-color var(--duration-default);

					&:hover,
					&:focus,
					&:focus-visible {
						border-color: rgb(var(--color-foreground));
					}
				}

				&.disabled + label {
					opacity: 0.5;

					&:before {
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgb(var(--color-border));
						clip-path: polygon(96% 0, 100% 0, 4% 100%, 0% 100%);
					}
				}

				&:checked:not(.disabled) + label {
					border-color: rgb(var(--color-foreground));

					&:before {
						background-color: rgb(var(--color-button));
					}
				}

			}
		}

		label {
			display: inline-flex;
			align-items: center;
			height: 3.6rem;
			padding: 0 1.5rem;
			font-size: 1.4rem;
			font-weight: 300;
			color: rgb(var(--color-foreground-title));
			border-radius: 0.4rem;
			cursor: pointer;
			position: relative;
			transition: var(--duration-default);
			width: 100%;

			@media (min-width: 750px) {
				font-size: 1.6rem;
				height: 4rem;
			}
		}

		& .variant-dropdown .variant-item input[type=radio]:checked + label,
		& .variant-dropdown label[data-sibling-closer] {
			background: rgba(var(--color-drawer-gray), 0.4);
			border-radius: 0 !important;
		}

		& .variant-dropdown .variant-item input[type=radio]:checked + label::after,
		& .variant-dropdown .variant-item input[type=radio]:checked + label::before {
			border-radius: 25px;
		}

	}

	/* Color swathes */
	.variant-dropdown .color-swatch {

		width: 1.2rem;
		height: 1.2rem;
		padding: 0;
		border-radius: 50%;
		border: 0.1rem solid transparent;
		box-sizing: border-box;
		position: relative;
		z-index: 2;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			width: 1rem;
			height: 1rem;
			transform: translateY(-50%);
			border-radius: inherit;
			background-color: var(--swatch-color);
			transition: border-color var(--duration-default);
		}

		&::before {
			content: "";
			position: absolute;
			display: block;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			background-color: transparent !important;
			border: 1px solid rgb(var(--color-border));
			transition: border-color var(--duration-default);
		}

		&.swatch-custom {
			padding: 2rem;
			width: 100%;
			height: 4.4rem;
			border-radius: 50%;
			border: none;

			&::before {
				width: calc(2rem + 2px);
				height: calc(2rem + 2px);
			}
			&::after {
				left: calc(2rem + 1px);
				width: 2rem;
				height: 2rem;
			}
		}

		input.disabled + & {
			border-color: rgb(var(--color-border));
			opacity: 1;

			&::before {
				top: 50%;
				height: 0.2rem;
				clip-path: unset;
				z-index: 1;
				transform: translateY(-50%) rotate(-45deg);
			}

			span {
				clip: unset;
				pointer-events: none;
				overflow: visible;
				color: rgba(var(--color-gray));

				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 40%;
					display: block;
					width: 3.2rem;
					height: 0.2rem;
					clip-path: unset;
					z-index: 1;
					background-color: rgb(var(--color-border));
					transform: translate(-50%, -50%) rotate(-45deg);
				}
			}
		}

		input:checked:not(.disabled) + &,
		input:hover:not(.disabled) + & {
			border-color: rgb(var(--color-foreground));

			&::before {
				border-color: rgb(var(--color-foreground));
			}
		}

		.variant-value {
			margin-left: 3rem;
		}

	}

}