@use '$src/themes/spacing' as *;
@use '$src/themes/layout' as *;
@use '$src/themes/effects' as *;
@use '$src/themes/colors' as *;

.container {
	display: inline-flex;
	border-radius: $full-corner;
	padding: $unit-half;

	&.contained {
		background-color: var(--segmented-control-background-bg);
	}
}

.group {
	display: flex;
	gap: $unit-half;
	align-items: center;
}

.item {
	all: unset;
	cursor: pointer;
	border-radius: $full-corner;
	padding: $unit-half;
	@include smooth-transition($duration-quick, background-color, opacity);

	&:hover:not(:disabled) {
		background-color: var(--option-bg-hover);
	}

	&:focus-visible {
		@include focus-ring($blue);
	}

	&[data-state='on'] {
		background-color: var(--accent-subtle-bg);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.image {
	width: $unit-3x;
	height: $unit-3x;
	display: block;
}