.switcher-basic{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-1);
	overflow-x:auto
}
.switcher-basic .items{
	display:flex;
	padding:0;
	margin:0;
	align-items:center;
	border-radius:var(--radius-m);
	background:var(--surface-02);
	width:fit-content
}
.switcher-basic .items .item{
	display:flex;
	height:var(--spacing-8);
	padding:0px var(--spacing-3);
	justify-content:center;
	align-items:center;
	border-radius:var(--radius-m);
	background:var(--surface-02);
	font-weight:400;
	line-height:1.5;
	letter-spacing:-.08px;
	user-select:none;
	cursor:pointer;
	border:2px solid transparent;
	transition:background .4s;
	font-size:16px;
	white-space:nowrap
}
.switcher-basic .items .item:hover{
	background:var(--surface-03)
}
.switcher-basic .items .item:active{
	background:var(--tertiary-active)
}
.switcher-basic .items .item.active{
	background:var(--surface-09);
	color:var(--text-body-01-inverse);
	pointer-events:none;
	gap:var(--spacing-1);
	font-weight:500
}
.switcher-basic .items .item.active img{
	filter:var(--text-primary-default-icon)
}
.switcher-basic .items .item.active svg use{
	fill:var(--text-primary-default)
}
.switcher-basic .items .item img{
	width:0;
	height:var(--spacing-5);
	transition:width .4s
}
.switcher-basic .items .item.active img{
	display:block;
	width:var(--spacing-5)
}
.switcher-basic .items .item svg{
	width:0;
	height:var(--spacing-5);
	transition:width .4s
}
.switcher-basic .items .item.active svg{
	display:block;
	width:var(--spacing-5)
}

.switcher-basic .values .value{
	display:none
}
.switcher-basic .values .value.active{
	display:block
}


.switcher-basic .items.background{
	background:transparent;
	overflow:hidden
}
.switcher-basic .items.background .item{
	padding:0;
	height:var(--spacing-8);
	width:var(--spacing-8);
	transition:width .4s;
	border-radius:0;
	border:0;
	position:relative
}
.switcher-basic .items.background .item.active{
	width:var(--spacing-10)
}
.switcher-basic .items.background .item.active:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:var(--spacing-3);
	height:var(--spacing-3);
	background:var(--surface-09);
	border-radius:var(--radius-rounded);
	border:1px solid var(--text-body-01-inverse)
}
.switcher-basic .items.background .item span{
	opacity:0
}