.button-basic{
	display:flex;
	justify-content:center;
	align-items:center;
	height:40px;
	padding:0 var(--spacing-4);
	gap:var(--spacing-2);
	flex-shrink:0;
	border-radius:var(--radius-lg);
	text-align:center;
	color:var(--text-body-01);
	font:var(--body-m-medium);
	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
}
.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{
	opacity:.3;
	pointer-events:none
}

/* sizes */
.button-basic.size-xl{
	height:56px;
	font:var(--body-l-medium);
	letter-spacing:var(--letter-spacing-l)
}
.button-basic.size-l{
	height:48px;
	font:var(--body-l-medium);
	letter-spacing:var(--letter-spacing-l)
}
.button-basic.size-s{
	height:32px
}

.button-basic.size-xl.img-only{
	width:56px;
	min-width:56px;
	height:56px
}
.button-basic.size-l.img-only{
	width:48px;
	min-width:48px;
	height:48px
}
.button-basic.size-m.img-only{
	width:40px;
	min-width:40px;
	height:40px
}
.button-basic.size-s.img-only{
	width:32px;
	min-width:32px;
	height:32px
}
.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-01);
	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:var(--text-body-white);
	fill:#181818
}

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

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

/* tertiary */
.button-basic.tertiary{
	color:var(--text-body-01-inverse);
	background-color:var(--tertiary-default)
}
.button-basic.tertiary:hover{
	background-color:var(--tertiary-hover)
}
.button-basic.tertiary:active{
	background-color:var(--tertiary-active)
}
.button-basic.tertiary svg use{
	fill:var(--text-body-01-inverse)
}

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

/* glass */
.button-basic.glass{
	border:2px solid var(--text-body-01-inverse);
	backdrop-filter:blur(2px);
	color:var(--text-body-01-inverse);
	transition:backdrop-filter .4s
}
.button-basic.glass:hover{
	backdrop-filter:blur(3px);
}
.button-basic.glass:active{
	backdrop-filter:blur(5px)
}
.button-basic.glass svg use{
	fill:var(--text-body-01-inverse)
}

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


.button-external{
	display:flex;
	width:100%;
	max-width:355px;
	height:fit-content;
	padding:var(--spacing-6);
	flex-direction:column;
	gap:var(--spacing-6);
	border-radius:var(--radius-md);
	background:var(--tertiary-default);
	font:var(--body-xl-medium);
	letter-spacing:var(--letter-spacing-xl);
	color:var(--text-body-01-inverse)
}
.button-external:hover{
	background:var(--tertiary-hover)
}
.button-external:active{
	background:var(--tertiary-active)
}
.button-external span{
	order:-1;
	width:48px;
	height:48px;
	background-color:var(--primary-default);
	border-radius:var(--radius-lg);
	display:flex;
	align-items:center;
	justify-content:center
}


.button-feedback{
	width:var(--container-width);
	margin:var(--spacing-9) auto 0;
	padding:var(--spacing-6);
	border-radius:var(--radius-md);
	background-color:var(--secondary-default);
	display:flex;
	gap:var(--spacing-4);
	align-items:center;
	font:var(--body-l-medium);
	letter-spacing:var(--letter-spacing-l);
	color: var(--text-body-01);
	transition:background-color .4s
}
.button-feedback:hover{
	background-color:var(--secondary-hover);
	color: var(--text-body-01)
}
.button-feedback:active{
	background-color:var(--secondary-active)
}
.button-feedback img{
	max-height:64px;
	width:auto
}
@media(max-width:480px){
	.button-external{
		padding:var(--spacing-4);
		gap:var(--spacing-4);		
		font:var(--body-l-medium);
		letter-spacing:var(--letter-spacing-l)
	}
}