.button-basic{
	display:flex;
	padding:var(--spacing-3) var(--spacing-5);
	justify-content:center;
	align-items:center;
	gap:var(--spacing-2);
	flex-shrink:0;
	border-radius:var(--radius-m);
	font:var(--body-m-semibold);
	letter-spacing:var(--letter-spacing-m);
	color:var(--text-body-01);
	text-align:center;
	cursor:pointer;
	width:fit-content;
	background-color:transparent;
	user-select:none;
	border:none;
	transition:background-color .4s, opacity .4s, color .4s, transform .4s, border-color .4s
}
.button-basic svg use{
	transition:fill .4s
}
.button-basic.center{
	margin-left:auto;
	margin-right:auto
}
.button-basic.expand{
	width:100%
}
.button-basic.disabled{
	opacity:.4;
	pointer-events:none
}


.button-basic img,
.button-basic svg{
	width:24px;
	height:24px;
	min-width:24px
}

.button-basic.size-xl{
}
.button-basic.size-l{
}
.button-basic.size-m{
}
.button-basic.size-s{
	padding:var(--spacing-2) var(--spacing-4);
	font:var(--body-s-semibold);
	letter-spacing:var(--letter-spacing-s);
	gap:var(--spacing-1)
}
.button-basic.size-s svg{
	width:20px;
	height:20px;
	min-width:20px
}

.button-basic.img-only{
	padding:0;
	aspect-ratio:1
}
.button-basic.img-only span:not(.replace){
	display:none
}
.button-basic.img-only.size-xl{
	width:56px
}
.button-basic.img-only.size-l{
	width:48px
}
.button-basic.img-only.size-m{
	width:40px
}
.button-basic.img-only.size-s{
	width:32px;
	height:32px
}

.button-basic.primary{
	background-color:var(--primary-default);
	color:var(--text-body-01-inverse);
	box-shadow:0 8px 20px rgba(227, 30, 54, .3)
}
.button-basic.primary:hover{
	background-color:var(--primary-hover);
	transform:translateY(-2px)
}
.button-basic.primary:active,
.button-basic.primary.active{
	background-color:var(--primary-active)
}
.button-basic.primary img{
	filter:var(--text-body-01-inverse-icon)
}
.button-basic.primary svg use{
	fill:var(--text-body-01-inverse)
}



.button-basic.secondary{
	background-color:var(--surface-09);
	color:var(--text-body-01-inverse);
}
.button-basic.secondary:hover{
	background-color:var(--surface-08)
}
.button-basic.secondary:active,
.button-basic.secondary.active{
	background-color:var(--surface-09)
}
.button-basic.secondary svg use{
	fill:var(--text-body-01-inverse)
}



.button-basic.tertiary{
	background-color:var(--tertiary-default);
}
.button-basic.tertiary:hover{
	background-color:var(--tertiary-hover);
	color:var(--text-body-01);
}
.button-basic.tertiary:active,
.button-basic.tertiary.active{
	background-color:var(--tertiary-active);
	color:var(--text-body-01);
}


.button-basic.outline{
	border:1px solid var(--border-light)
}
.button-basic.outline:hover{
	background-color:var(--primary-disabled);
	border-color:var(--border-primary);
	color:var(--text-primary-default)
}
.button-basic.outline:active,
.button-basic.outline.active{
	background-color:transparent
}
.button-basic.outline:hover svg use{
	fill:var(--text-primary-default)
}


.button-basic.dashed{
	border:1px dashed var(--border-light)
}
.button-basic.dashed:hover{
	background-color:var(--primary-disabled);
	border-color:var(--border-primary);
	color:var(--text-primary-default)
}
.button-basic.dashed:active,
.button-basic.dashed.active{
	background-color:transparent
}
.button-basic.dashed:hover svg use{
	fill:var(--text-primary-default)
}


.button-basic.flat{
	border-color:transparent
}
.button-basic.flat:hover{
	background-color:var(--tertiary-hover);
	color:var(--text-body-01);
}
.button-basic.flat:active,
.button-basic.flat.active{
	background-color:var(--tertiary-active);
	color:var(--text-body-01);
}

.button-basic.clear{
	border-color:transparent;
	padding:0;
	font-weight:600
}
.button-basic.clear:hover{
	color:var(--primary-hover)
}
.button-basic.clear:active,
.button-basic.clear.active{
	color:var(--primary-active)
}