// Swatches
.swatches {
	flex-wrap: wrap;

	.variation {
		text-align: center;
		cursor: pointer;
		word-break: break-word;
		hyphens: auto;
		.label-variation,
		.label-info {
			line-height: 1rem;
			> span.label-variation {
				margin: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 50px;
				display: inline-block;
			}
		}
		&.not-available {
			border: solid 1px $colorDangerFont;
			.label-variation {
				opacity: 0.5;
			}
		}
	}

	&-image {
		box-sizing: content-box;
		opacity: 1;
		text-align: left;
		cursor: pointer;
		overflow: hidden;
		word-break: break-word;
		text-overflow: ellipsis;
		transition: all 0.5s ease-in-out;
		width: 50px;
		position: relative;

		.square-image img {
			padding: map_get($spacers, 2);
			transition: height,width 0.5s ease-in-out;
			width: rem(88px);
			&:hover {
				transform: scale(1.2);
			}
		}

		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-width: 0 0 3px;
			border-color: $colorActive;
			border-style: solid;
			transition: width .4s;
			width: 0;
		}

		&.active,
		&:hover {
			&::after {
				width: 100%;
			}
		}

		&.active img{
			filter: grayscale(0);
		}
	}

	&.imgswatches {
		&.radio-selected img {
			filter: grayscale(1);
		}
	}

	&-text {
	 	padding: rem(10px) rem(15px);
		transition: all $transition-base-duration $transition-base-timing;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-width: 0 0 3px;
			border-color: $colorActive;
			border-style: solid;
			transition: width .4s;
			width: 0;
		}

		&.active,
		&:hover {
			font-weight: $font-weight-bold;

			&::after {
				width: 100%;
			}
		}
	}

	&-not-in-stock,
	&-sold-out {
		border: 1px solid $colorDangerFont;

		&:after {
			display: none;
			visibility: hidden;
		}
	}

	.custom-radio {
		.custom-control-label {
			word-break: break-word;
			hyphens: auto;
		}
	}
}

.variation[data-type="radio"] {
	flex-wrap: wrap;
	.badge-not-available {
		display: flex;
		flex-basis: 100%;
		justify-content: center;
		align-items: center;
		margin-left: auto;
	}
}