@charset "UTF-8";
@use 'mixins/mixins';
@use 'mixins/utils';
@use 'mixins/function';
@use 'common/var';

$disabled-border-color: var(--color-foreground-base);

$loading-overlay-background-color: rgba(255, 255, 255, 0.35);

@include mixins.b(button) {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;

	border: var(--border-width-base) var.$button-border-color
		var(--border-style-base);
	color: var.$button-font-color;
	background-color: var.$button-background-color;
	font-weight: var(--font-weight-bold);
	border-radius: var.$button-border-radius;
	padding: var.$button-padding-vertical var.$button-padding-horizontal;
	font-size: var.$button-font-size;

	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: 0.1s;

	@include utils.utils-user-select(none);

	&:active {
		color: var.$button-active-color;
		border-color: var.$button-active-border-color;
		background-color: var.$button-active-background-color;
		outline: none;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	@include mixins.when(loading) {
		position: relative;
		pointer-events: none;

		&:before {
			pointer-events: none;
			content: '';
			position: absolute;
			left: -1px;
			top: -1px;
			right: -1px;
			bottom: -1px;
			border-radius: inherit;
			background-color: $loading-overlay-background-color;
		}
	}

	@include mixins.when(disabled) {
		&,
		&:hover,
		&:active,
		&:focus {
			cursor: not-allowed;
			background-image: none;
			color: var.$button-disabled-font-color;
			background-color: var.$button-disabled-background-color;
			border-color: var.$button-disabled-border-color;
		}
	}

	@include mixins.when(round) {
		--button-border-radius: 20px;
	}

	@include mixins.when(circle) {
		--button-padding-vertical: var(--spacing-xs);
		--button-padding-horizontal: var(--spacing-xs);
		--button-border-radius: 50%;
	}

	@include mixins.m(mini) {
		--button-padding-vertical: var(--spacing-4xs);
		--button-padding-horizontal: var(--spacing-2xs);
		--button-font-size: var(--font-size-2xs);

		@include mixins.when(circle) {
			--button-padding-vertical: var(--spacing-4xs);
			--button-padding-horizontal: var(--spacing-4xs);
		}
	}

	@include mixins.m(small) {
		--button-padding-vertical: var(--spacing-3xs);
		--button-padding-horizontal: var(--spacing-xs);
		--button-font-size: var(--font-size-2xs);

		@include mixins.when(circle) {
			--button-padding-vertical: var(--spacing-3xs);
			--button-padding-horizontal: var(--spacing-3xs);
		}
	}

	@include mixins.m(medium) {
		--button-padding-vertical: var(--spacing-2xs);
		--button-padding-horizontal: var(--spacing-xs);
		--button-font-size: var(--font-size-2xs);

		@include mixins.when(circle) {
			--button-padding-vertical: var(--spacing-2xs);
			--button-padding-horizontal: var(--spacing-2xs);
		}
	}

	@include mixins.m(xlarge) {
		--button-padding-vertical: var(--spacing-xs);
		--button-padding-horizontal: var(--spacing-s);
		--button-font-size: var(--font-size-m);

		@include mixins.when(circle) {
			--button-padding-vertical: var(--spacing-xs);
			--button-padding-horizontal: var(--spacing-xs);
		}
	}
}
