@mixin switchGroup() {
	position: relative;
	display: inline-flex;
	outline: none;
	overflow: hidden;
	padding: 0 0.25rem;
}

@mixin switchGroupIndicator() {
	transition: $fastTrans;
	@media (prefers-reduced-motion) {
		transition: none;
	}
	position: absolute;
	pointer-events: none;
	height: calc(100% - 0.5rem);
	bottom: 0.25rem;
}

@mixin switchGroupItem() {
	flex: 0 0 auto;
	z-index: 2;
	margin: 0.1875rem 0;
	text-align: center;
	&__input {
		@include crossBrowser(appearance, none);
		position: absolute;
		pointer-events: none;
		opacity: 0;
		&:disabled + .dui__switch__group__item__value {
			opacity: 0.5;
			cursor: not-allowed;
		}
		&:focus-visible + .dui__switch__group__item__value {
			text-decoration: underline;
			* {
				text-decoration: underline;
			}
		}
	}
	&__value {
		position: relative;
		overflow: hidden;
		line-height: 1.5;
		white-space: nowrap;
		cursor: pointer;
		@include crossBrowser(user-select, none);
	}
}

.dui__switch__group {
	@include switchGroup();
	&__indicator {
		@include switchGroupIndicator();
	}
	&__item {
		@include switchGroupItem();
	}
	&--wide {
		display: flex;
		width: 100%;
		.dui__switch__group__item {
			flex: 1 0 auto;
		}
	}
	&--seamless {
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		&:hover {
			box-shadow: none;
		}
		.dui__switch__group__indicator {
			border-radius: 0;
			height: 0.125em;
			bottom: 0;
		}
		.dui__switch__group__item {
			margin: 0;
			&__value {
				border-radius: 0;
				color: $subFont;
				opacity: 0.5;
			}
			&--active {
				.dui__switch__group__item__value {
					opacity: 1;
					color: $mainFont;
				}
			}
		}
	}
}