$components-colors: (
	'positive',
	'negative',
);

%base-button {
	$height-button-small: 2.25rem;
	$font-size-button-small: 0.875rem;

	$height-button-big: 3.25rem;
	$font-size-button-big: 1.25rem;

	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 2.875rem;
	padding: 0.5rem 1.5rem;

	font-family: var(--font-family-secondary);
	font-weight: 500;
	font-size: 1rem;
	line-height: 100%;

	border: none;
	border-radius: 3px;

	transition: all 0.16s ease-in-out;
	user-select: none;
	cursor: pointer;
	outline: none;

	&.-pill {
		border-radius: 999px;
	}

	&.-small {
		min-height: $height-button-small;
		font-size: $font-size-button-small;
	}

	&.-big {
		min-height: $height-button-big;
		font-size: $font-size-button-big;
	}

	&.-loading {
		color: transparent;

		&:after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			height: 1rem;
			width: 1rem;
			margin: auto;
			border: 2px solid;
			border-radius: 999px;
			animation: spinAround 0.48s infinite linear;
		}
	}

	&.-fluid {
		width: 100%;
	}
}

.#{$component-prefix}button {
	@extend %base-button;

	color: var(--color-text-invert-100);
	background-color: var(--color-primary-500);

	&:focus {
		box-shadow: 0 0 0 .175rem var(--color-primary-300);
	}

	&:hover {
		background-color: var(--color-primary-600);
	}

	&.-loading {
		color: transparent;

		&:after {
			border-right-color: var(--color-text-invert-100);
			border-top-color: var(--color-text-invert-100);
		}
	}

	@each $key, $value in $components-colors {
		&.-#{$key} {
			color: var(--color-text-invert-100);
			background-color: var(--color-#{$key}-200);

			&:focus {
				box-shadow: 0 0 0 .175rem var(--color-#{$key}-100);
			}

			&:hover {
				background-color: var(--color-#{$key}-300);
			}

			&.-loading {
				color: transparent;

				&:after {
					border-right-color: var(--color-text-invert-100);
					border-top-color: var(--color-text-invert-100);
				}
			}
		}

		&.-white {
			color: var(--color-primary-600);
			background-color: white;

			&:focus {
				box-shadow: 0 0 0 .175rem var(--color-primary-200);
			}

			&:hover {
				background-color: var(--color-neutral-100);
			}

			&.-loading {
				color: transparent;

				&:after {
					border-right-color: var(--color-primary-600);
					border-top-color: var(--color-primary-600);
				}
			}

			&.-secondary {
				color: white;
				background: transparent;
				border: 1px solid white;

				&:hover {
					background-color: transparent;
				}

				&:focus {
					box-shadow: 0 0 0 .175rem var(--color-primary-200);
				}

				&.-loading {
					color: transparent;

					&:after {
						border-right-color: white;
						border-top-color: white;
					}
				}
			}

			&.-tertiary {
				color: var(--color-primary-600);
				border: none;
				background: transparent;

				&:hover {
					background-color: var(--color-neutral-100);
				}

				&.-loading {
					color: transparent;

					&:after {
						border-right-color: var(--color-primary-600);
						border-top-color: var(--color-primary-600);
					}
				}
			}
		}
	}

	&.-secondary {
		color: var(--color-primary-500);
		border: 1px solid var(--color-neutral-300);
		background: transparent;

		&:hover {
			background-color: var(--color-neutral-100);
		}

		&.-disabled {
			color: var(--color-neutral-400);
			border: 1px solid var(--color-neutral-300);
			background-color: transparent;

			&:hover {
				background-color: transparent;
			}
		}

		&.-loading {
			color: transparent;

			&:after {
				border-right-color: var(--color-primary-600);
				border-top-color: var(--color-primary-600);
			}
		}

		&.-disabled {
			&.-loading {
				&:after {
					border-right-color: var(--color-neutral-500);
					border-top-color: var(--color-neutral-500);
				}
			}
		}
	}

	&.-disabled {
		background-color: var(--color-neutral-200);
		cursor: not-allowed;

		&:not(.-loading) {
			color: var(--color-neutral-500);
		}

		&.-loading {
			&:after {
				border-right-color: var(--color-neutral-500);
				border-top-color: var(--color-neutral-500);
			}
		}

		&:hover {
			background-color: var(--color-neutral-300);
		}
	}
}

@keyframes spinAround {
	from { transform: rotate(0deg); }
	to   { transform: rotate(359deg); }
}