.segmented-control {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	padding: 6px;
	height: 54px;
	border-radius: 20px;
	background-color: #ebebeb;
	box-sizing: border-box;

	@include mobile {
		padding: 4px;
		gap: 4px;
		height: 44px;
		border-radius: 18px;
	}
}

.segmented-control-item {
	cursor: pointer;
	flex: 1;

	input {
		display: none;
	}

	input:checked ~ div {
		color: $color-black;
		background-color: $color-white;
	}

	div {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 42px;
		padding: 0px 16px;
		border-radius: 16px;
		font-size: 16px;
		font-weight: 500;
		line-height: 18px;
		text-align: center;
		color: $color-gray-md;
		box-sizing: border-box;

		@include mobile {
			padding: 0px 14px;
			height: 36px;
			border-radius: 14px;
			font-size: 14px;
			line-height: 16px;
		}
	}
}