/**
 * Shared "calendar nav bar" styling for srta/month and srta/week — both
 * blocks show an identical prev/next + label + count header row above their
 * own card, so this is the one place that treatment is declared.
 */
.srta-month__nav,
.srta-week__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--wp--preset--spacing--30); /* 16px */
}

.srta-month__nav-left,
.srta-week__nav-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.srta-month__navbtn,
.srta-week__navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--wp--custom--graphite--300);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--custom--graphite--700);
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.srta-month__navbtn:hover,
.srta-month__navbtn:focus-visible,
.srta-week__navbtn:hover,
.srta-week__navbtn:focus-visible {
	border-color: var(--wp--custom--graphite--500);
	color: var(--wp--custom--graphite--900);
}

.srta-month__navbtn[disabled],
.srta-week__navbtn[disabled] {
	opacity: 0.45;
	cursor: default;
}

.srta-month__navicon,
.srta-week__navicon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.srta-month__navicon svg,
.srta-week__navicon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.srta-month__label,
.srta-week__range {
	font-size: var(--wp--preset--font-size--x-large); /* 20px */
	font-weight: 700;
	color: var(--wp--custom--graphite--900);
}

.srta-month__count,
.srta-week__count {
	color: var(--wp--custom--graphite--500);
	font-size: var(--wp--preset--font-size--medium); /* 16px */
}