button {
	appearance: none;
	border: unset;
	background: unset;
	color: unset;
	text-decoration: unset;
	font-family: unset;
	font-size: unset;
	line-height: unset;
	box-shadow: unset;
	display: inline-block;
	cursor: pointer;
	text-align: unset;
	-webkit-tap-highlight-color: transparent;
}

button:disabled {
	cursor: not-allowed;
}

.buttons-container {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
}

.button-primary, .button-secondary, .button-tertiary {
	height: 44px;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	padding: 0 24px;
	white-space: nowrap;
	max-width: 100%;
	gap: 8px;
	font: var(--font-label-l);
	border-radius: 9999px;
}

.button-small {
	height: 36px;
	padding: 0 16px;
	font: var(--font-label-m);
}

.button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
}

.button-primary img {
	width: 20px;
	height: 20px;
}

.button-secondary img,
.button-tertiary img {
	width: 20px;
	height: 20px;
	filter: invert(1);
}

.button-icon img {
	width: 24px;
	height: 24px;
}

.button-small.button-icon {
	height: 36px;
	width: 36px;
}

.button-small.button-icon img {
	width: 20px;
	height: 20px;
}

.button-primary {
	background-color: var(--color-background-4-default);
	color: var(--color-text-4);
}

.button-secondary {
	background: var(--color-background-3-default);
	color: var(--color-text-1);
}

.button-tertiary {
	background-color: var(--color-background-1-default);
	color: var(--color-text-1);
}

.button-primary:active {
	background-color: var(--color-background-4-pressed);
	color: var(--color-text-4);
}

.button-primary:disabled,
.button-secondary:disabled,
.button-tertiary:disabled {
	opacity: 0.4;
}

.button-secondary:active {
	background: var(--color-background-3-pressed);
	color: var(--color-text-1);
}

.button-tertiary:active {
	background-color: var(--color-background-1-pressed);
	color: var(--color-text-1);
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-tertiary:focus-visible {
	outline-offset: 1px;
}

.download-app-container {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 430px;
}

.download-app-button {
	height: 48px;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	padding: 12px 24px;
	white-space: nowrap;
	max-width: 100%;
	gap: 8px;
	background-color: var(--color-background-3-default);
	color: var(--color-text-1);
	flex: 1;
	border-radius: 9999px;
}

.download-app-button-inverted {
	background-color: var(--color-background-4-default);
	color: var(--color-text-4);
}

.download-app-button:active {
	background-color: var(--color-background-3-pressed);
}

.download-app-button-inverted:active {
	background-color: var(--color-background-4-pressed);
}

.download-app-button img {
	width: 24px;
	height: 24px;
	filter: invert(1);
}

.download-app-button-inverted img {
	filter: none;
}

.download-app-button > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.download-app-button-top-line {
	font-size: 9px;
	line-height: 6px;
	font-weight: 400;
}

.download-app-button-bottom-line {
	font: var(--font-label-l);
}

.button-loading {
	color: transparent;
}

.button-loading::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	mask-image: url('../../icons/spinner.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 20px 20px;
	background-color: var(--color-icon-4);
	animation: spin 1s linear infinite;
	position: absolute;
}

.button-secondary.button-loading::before,
.button-tertiary.button-loading::before {
	background-color: var(--color-icon-1);
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media screen and (min-width: 960px) {
	.buttons-container {
		flex-direction: row-reverse;
		gap: 12px;
	}
}