.zeero-button {
	padding: 0.3em;
	border-radius: 5px;
	font-size: 0.8rem;
	width: fit-content;
	text-align: center;
	cursor: pointer;
	transition: filter 0.3s, background 0.3s, color 0.3s, opacity 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.zeero-button.xs {
	width: 15%;
}

.zeero-button.sm {
	width: 25%;
}

.zeero-button.md {
	width: 50%;
}

.zeero-button.lg {
	width: 75%;
}

.zeero-button.xl {
	width: 100%;
}

.zeero-button.primary {
	background: var(--primary);
}

.zeero-button.secondary-outline {
	border: 1px solid var(--secondary);
}

.zeero-button.secondary {
	background: var(--secondary);
	color: var(--text-color);
}

.zeero-button.table-action {
	background: var(--dark-grey);
	color: var(--text-color);
}

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

.zeero-button.warn {
	background: var(--warn);
}

.zeero-button.active:not(.disabled) {
	background: var(--primary);
	color: var(--text-color);
}

.zeero-button.disabled {
	user-select: none;
	cursor: default;
	opacity: 0.5;
}

.zeero-button:not(.disabled):hover,
.zeero-button:not(.disabled):active {
	filter: brightness(90%);
}

.zeero-button.secondary-outline:not(.disabled):hover,
.zeero-button.secondary-outline:not(.disabled):active {
	background: var(--secondary);
	filter: brightness(100%);
	transition: background 0.3s;
}

.zeero-button .zeero-button-content {
	filter: brightness(100%);
}

.zeero-button.none:hover {
	background-color: var(--grey);
}