/* General resetting */

button {
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari and Chrome */
	appearance: none;
	background: none;
	border: none;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	outline: none;
}

.button {
	color: var(--button-weakest-color);
	background: var(--button-weakest-background);
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
}

.button--small {
	border-radius: 4px;
	height: 26px;
	padding: 2px 8px;
	margin-right: 6px;
}

.button--large {
	border-radius: 6px;
	padding: 2px 16px;
	height: 36px;
}

.button--large svg {
	width: 20px;
	margin-right: 5px;
}

.button--width-full {
	text-align: center;
	border-radius: 6px;
	padding: 2px 16px;
	height: 40px;
	width: 100%;
}

.button--colored-accented {
	color: var(--button-accented-color);
	background: var(--button-accented-background);
}

.button--colored-accented:active,
.button--colored-accented:hover {
	background: var(--button-accented-background-highlighted);
}

.button--colored-accented:active,
.button--colored-accented:hover {
	background: var(--button-accented-background-highlighted);
}

.button--colored-danger {
	color: var(--button-danger-color);
	background: var(--button-danger-background);
}

.button--colored-danger:active,
.button--colored-danger:hover {
	background: var(--button-danger-background-highlighted);
}

.button--colored-danger-weak {
	color: var(--main-color-danger-light);
}

.button--weak {
	color: var(--button-weak-color);
	background: var(--button-weak-background);
}

.button--weak:active,
.button--weak:hover {
	background: var(--button-weak-background-highlighted);
}

.button--weakest {
	color: var(--button-weakest-color);
	background: var(--button-weakest-background);
}

.button--weakest:active,
.button--weakest:hover {
	background: var(--button-weakest-background-highlighted);
}