.button-basic{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:var(--spacing-4) var(--spacing-6);
	gap:var(--spacing-2);
	flex-shrink:0;
	border-radius:var(--radius-lg);
	text-align:center;
	color:var(--text-body-01);
	font:var(--body-m-semibold);
	letter-spacing:var(--letter-spacing-m);
	cursor:pointer;
	width:fit-content;
	background-color:transparent;
	user-select:none;
	border:none;
	outline:none;
	white-space:nowrap;
	transition:background-color .4s, background-position .4s ease-in-out, opacity .4s, transform .4s cubic-bezier(.25, .8, .25, 1), border-color .4s, box-shadow .4s, color .4s
}
.button-basic svg use{
	transition:fill .4s;
    fill: currentColor;
}
.button-basic:hover{
	transform: translateY(-2px);
	box-shadow:var(--shadow-hover)
}

.button-basic:focus-visible{
	outline:none;
	box-shadow:var(--focus-ring)
}

@media (prefers-reduced-motion: reduce){
	.button-basic,
	.button-basic svg use{
		transition:none !important
	}
	.button-basic:hover{
		transform:none
	}
}
.button-basic img,
.button-basic svg{
	width:24px;
	height:24px;
	min-width:24px;
	order:-1
}
/* img only */
.button-basic.img-only{
	padding:0
}
.button-basic.img-only span{
	display:none
}

.button-basic.expand{
	width:100%
}
.button-basic.disabled,
.button-basic:disabled{
	opacity:.3;
	pointer-events:none
}

/* sizes */
.button-basic.size-s{
	padding:var(--spacing-2) var(--spacing-5);
	font:var(--body-s-semibold);
	letter-spacing:var(--letter-spacing-s)
}

.button-basic.size-m.img-only{
	width:40px;
	min-width:40px;
	height:40px
}
.button-basic.size-s.img-only{
	padding:0;
	width:24px;
	min-width:24px;
	height:24px
}
.button-basic.size-s.img-only img,
.button-basic.size-s.img-only svg{
	width:18px;
	height:18px;
	min-width:18px
}

/* primary */
.button-basic.primary{
	color:var(--text-body-095);
	background-color:var(--primary-default)
}
.button-basic.primary:hover{
	background-color:var(--primary-hover)
}
.button-basic.primary:active{
	background-color:var(--primary-active)
}
.button-basic.primary svg use{
	fill:currentColor
}

/* secondary */
.button-basic.secondary{
	background-color:var(--dark-default);
	color:var(--text-body-01)
}
.button-basic.secondary:hover{
	background-color:var(--primary-default);
	color:var(--text-body-09)
}
.button-basic.secondary:active{
	background-color:var(--primary-active)
}
.button-basic.secondary svg use{
	fill:currentColor
}
.button-basic.secondary:hover svg use{
	fill:currentColor
}

/* outline */
.button-basic.outline{
	color:var(--text-body-09);
	border:1px solid var(--border-light);
	box-shadow:none
}
.button-basic.outline:hover{
	color:var(--text-body-08);
	border-color:var(--border-dark)
}
.button-basic.outline:active{
	color:var(--text-body-095)
}
.button-basic.outline svg use{
	fill:currentColor
}

/* tertiary */
.button-basic.tertiary{
	color:var(--text-body-09);
	background-color:var(--tertiary-default);
	box-shadow:none;
	transform:none
}
.button-basic.tertiary:hover{
	background-color:var(--tertiary-hover);
	color:var(--text-body-01)
}
.button-basic.tertiary:active{
	background-color:var(--tertiary-active)
}
.button-basic.tertiary svg use{
	fill:currentColor
}
.button-basic.tertiary:hover svg use{
	fill:currentColor
}


/* --- DASHED --- */
.button-basic.dashed{
	border:1px dashed var(--border-light);
    color: var(--text-body-095);
	transform:none
}

.button-basic.dashed:hover{
	background-color:var(--tertiary-disabled);
	border-color:var(--border-primary)
}
.button-basic.dashed:active,
.button-basic.dashed.active{
	background-color:transparent
}

.js-theme-toggle svg {
    fill: none;
    stroke: currentColor;
    transition: stroke .3s
}

.js-theme-toggle .icon-sun {
    display: none
}

.js-theme-toggle .icon-moon {
    display: block
}

[data-theme="dark"] .js-theme-toggle .icon-sun {
    display: block
}

[data-theme="dark"] .js-theme-toggle .icon-moon {
    display: none
}

@media(max-width:767px){
	.button-basic{
		white-space:auto
	}
}