@use '~@quartz/styles/scss/color-scheme';
@use '~@quartz/styles/scss/helpers/positioning';
@use '~@quartz/styles/scss/helpers/resets';
@use '~@quartz/styles/scss/states';
@use '~@quartz/styles/scss/tokens';

.button {
	@include resets.button;
	@include states.fade-on-hover;

	cursor: pointer;
	position: relative;

	&:disabled,
	&.inactive {
		@include states.fade-on-hover;

		opacity: 0.5;
	}

	&:disabled {
		cursor: default;
	}

	&.block {
		display: block;
		width: 100%;
	}
}

.label-text.loading {
	opacity: 0;
}

.spinner {
	@include positioning.center;
}

.label {
	font-size: 16px;
	opacity: inherit;
	white-space: nowrap;
	line-height: 1;

	&.block {
		font-weight: 800;
		display: block;
		box-sizing: border-box;
		text-align: center;
		border-radius: tokens.$size-border-radius;
		padding: 14px;
	}
}

.variant-primary {
	color: color-scheme.$accent;

	&.block {
		color: color-scheme.$background-2;
		background-color: color-scheme.$accent;
	}
}

.variant-secondary {
	color: color-scheme.$typography-faint;

	&.block {
		color: color-scheme.$typography;
		background-color: color-scheme.$background-3;
	}
}

.variant-warning {
	color: tokens.$color-red;

	&.block {
		color: tokens.$color-white;
		background-color: tokens.$color-red;
	}
}