.dropdown-basic{
	position:relative
}
.dropdown-basic button{
	margin:0;
	list-style:none;
	border-radius:var(--radius-m);
	border:1px solid var(--border-light);
	background:var(--surface-white);
	font:var(--body-s-medium);
	letter-spacing:var(--letter-spacing-s);
	width:100%
}
.dropdown-basic button,
.dropdown-basic .dropdown-items a{
	display:flex;
	align-items:center;
	padding:var(--spacing-2) var(--spacing-4);
	transition:background .4s;
	color:var(--text-body-01);
	white-space:nowrap;
	line-height:1;
	justify-content:space-between
}
.dropdown-basic button svg,
.dropdown-basic .dropdown-items svg{
	width:20px;
	height:20px;
	min-width:20px;
	min-height:20px
}
.dropdown-basic button .leftside,
.dropdown-basic .dropdown-items .leftside{
	margin-right:var(--spacing-2)
}
.dropdown-basic button .title,
.dropdown-basic .dropdown-items .title{
	display:block;
	padding-right:var(--spacing-3);
	font:var(--body-s-medium);
	letter-spacing:var(--letter-spacing-s);
}
.dropdown-basic .dropdown-items{
	display:none;
	position:absolute;
	width:100%;
	z-index:1;
	border-radius:var(--radius-m);
	border:1px solid var(--border-light);
	background:var(--surface-white);
	overflow:hidden
}
.dropdown-basic .dropdown-items a:hover{
	background:var(--tertiary-hover)
}
.dropdown-basic .dropdown-items a:active{
	background:var(--tertiary-active)
}
.dropdown-basic button .expand{
	transform:rotate(90deg);
	fill:var(--text-body-02);
	margin:0 var(--spacing-2);
	transition:transform .4s
}
.dropdown-basic:hover .dropdown-items{
	display:block;
	border-color:var(--tertiary-hover)
}	
.dropdown-basic:hover button{
	border-color:var(--primary-hover)
}
.dropdown-basic:hover button .expand{
	transform:rotate(-90deg);
	fill:var(--text-primary-default)
}

.dropdown-basic.active .dropdown-items{
	display:block;
	border-color:var(--tertiary-hover)
}	
.dropdown-basic.active button{
	border-color:var(--primary-hover)
}
.dropdown-basic.active button .expand{
	transform:rotate(-90deg)
}