.btn-myweek {
	--bs-btn-color: var(--myweek-green);
	--bs-btn-bg: var(--myweek-bg);
	--bs-btn-border-color: var(--myweek-green);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--myweek-green);
	--bs-btn-hover-border-color: var(--myweek-green);
	--bs-btn-border-width: 0.125rem;

	font-family: monospace;
}

:root {
	--action-btn-size: 3.25rem;
	--action-btn-padding: 0.42rem;
	--action-btn-radius: 0.9rem;
	--action-btn-border: 0.125rem;
}

.btn-action {
	min-height: var(--action-btn-size);
}

.btn-myweek.btn-action {
	border-width: var(--action-btn-border);
	border-radius: var(--action-btn-radius);

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

	line-height: 1;
}

.icon-btn.btn-action {
	width: var(--action-btn-size);
	padding: var(--action-btn-padding);

	border: var(--action-btn-border) solid var(--myweek-green-dark);
	border-radius: var(--action-btn-radius);
	background: var(--myweek-bg);

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

.btn-myweek.btn-action:hover,
.icon-btn.btn-action:hover {
	filter: brightness(0.98);
}

.btn-myweek.btn-action:active,
.icon-btn.btn-action:active {
	transform: translateY(0.0625rem);
}

.btn-myweek.btn-action:focus-visible,
.icon-btn.btn-action:focus-visible {
	outline: 0.1875rem solid var(--myweek-green-dark);
	outline-offset: 0.125rem;
}
