button,
.button {
	font-family: var(--main-font);
	background: var(--button-bg-color);
	color: var(--button-fg-color);
	cursor: pointer;
	border: none;
	padding: 0.25rem 0.8rem;
	border-radius: var(--border-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&:disabled {
		background-color: var(--button-disabled-bg-color);
		color: var(--button-disabled-fg-color);
		cursor: default;

		&:hover {
			background-color: var(--button-disabled-bg-color);
			color: var(--button-disabled-fg-color);
		}
	}

	&:hover {
		background-color: var(--button-hover-bg-color);
		color: var(--button-hover-fg-color);
	}

	&.icon {
		padding: 0.25rem;

		> .svg-icon {
			margin-right: 0;
		}
	}

	&.cancel {
		background-color: var(--button-cancel-bg-color);
		color: var(--button-cancel-fg-color);
	}

	> .icon {
		margin-right: 0.2rem;
	}

	> .svg-icon {
		display: flex;
		align-items: center;
		margin-top: 1px;
		margin-right: 0.2rem;
	}

	&.danger-variant {
		background-color: var(--button-remove-bg-color);
		color: var(--button-remove-fg-color);
	}
}

.button-group {
	display: flex;

	button:first-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	button {
		margin-right: 1px;
	}

	button:last-child {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}