:root {
	--ob-datenavigator-height: 3rem;
}

.ObDateNavigator-icon {
	display: inline-block;

	svg {
		width: 0.625em;
		position: relative;
		top: -1px;
	}
}

.ObDateNavigator-root {
	background-color: hsl(220, 20%, 96%);
	background-color: var(--block-header-color-bg);
	display: flex;
	font-size: 1rem;
	outline: none;

	&:focus-visible {
		outline: 2px solid var(--brand-dark, #336699);
		outline-offset: 2px;
	}
}

.ObDateNavigator-arrow {
	display: flex;
	align-items: center;
	flex: 0 0 var(--ob-datenavigator-height);
	justify-content: center;

	height: var(--ob-datenavigator-height);

	cursor: pointer;
	text-align: center;

	&:hover:not(:disabled) {
		background-color: #e3e3e3;
		background-color: var(--block-header-button-hover);
	}

	&:disabled {
		cursor: not-allowed;
		color: rgba(0 0 0 / 0.2);
	}
}

.ObDateNavigator-arrowLeft {
	border-right: 1px solid #dddddd;
	order: 1;
}

.ObDateNavigator-arrowRight {
	border-left: 1px solid #dddddd;
	order: 3;
}

.ObDateNavigator-date {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: center;
	order: 2;

	height: var(--ob-datenavigator-height);

	text-align: center;
}

.ObDateNavigator-today {
	order: 4;
	padding: 0 1rem;
	height: var(--ob-datenavigator-height);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	color: var(--brand-dark, #336699);
	text-transform: uppercase;
	cursor: pointer;

	text-wrap: nowrap;

	border-left: 1px solid #dddddd;

	&:hover:not(:disabled) {
		background-color: var(--block-header-button-hover);
	}

	&:focus-visible {
		outline: 2px solid var(--brand-dark, #336699);
		outline-offset: 2px;
	}
}