/* vim:set foldmethod=marker: */

.booking-calendar {
	--color-booking-calendar-option-selected: #eeffee;
	--color-booking-calendar-option-selected-border: #00a000;
	--color-booking-calendar-option-in-use: #ffeeee;
}

.booking-calendar-date {
	margin: 0 !important;
	padding: 0 !important;
}

.booking-calendar-contents {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 1em;
}

/* {{{ Month */

.booking-calendar-month {
	flex-shrink: 1;
}

.booking-calendar-month table {
	width: 100%;
}

.booking-calendar-month table th {
	font-weight: normal;
	font-size: 75%;
}

.booking-calendar-month .booking-calendar-day {
	width: 2em;
	height: 2em;
	padding: 0.25em;
}

.booking-calendar-month .booking-calendar-available {
	color: var(--color-booking-calendar-option-selected-border);
}

.booking-calendar-month .booking-calendar-day.booking-calendar-selected {
	background-color: black;
	color: white;
}

/* }}} */
/* {{{ Options */

.booking-calendar-options > .fieldset-wrapper > * {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5em;
}

.booking-calendar-options .form-item-slot {
	margin: 0;
}

.booking-calendar-options .form-item-slot input + label {
	display: block;

	flex-grow: 1;
	flex-basis: 50%;

	text-align: center;

	padding: 0.5em 1em;

	border-width: 0.125em;
	border-style: solid;
	border-color: var(--color-form-border, #CCCCCC)
}

.booking-calendar-options .form-item-slot input {
	display: none;
}

.booking-calendar-options .form-item-slot input + label {
	transition: all .2s ease-in-out;
}

.booking-calendar-options .form-item-slot input + label,
.booking-calendar-options .form-item-slot input[data-open="true"] + label,
.booking-calendar-options .form-item-slot input[data-in-use="true"] + label {
	background-color: transparent;
}

.booking-calendar-options .form-item-slot input[data-open="true"] + label {
	cursor: pointer;
}

/* keep the svg background? */
.booking-calendar-options .form-item-slot input[data-in-use="true"] + label {
	background-color: var(--color-booking-calendar-option-in-use);
	background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 100"><path style="fill:none;stroke:black;stroke-width:1px" d="M 0 100 L 175 0" /></svg>');
	background-size: 100% 100%;
	cursor: not-allowed;
}

.booking-calendar-options .form-item-slot input[data-open="true"]:checked + label {
	background-color: var(--color-booking-calendar-option-selected);
	border-color: var(--color-booking-calendar-option-selected-border);
}

/* }}} */
/* {{{ Old */
/*
.booking-calendar-options {
	padding: 0.5em;
	max-width: 20em;
}

.booking-calendar-options > .fieldset-wrapper > * {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.booking-calendar-options .form-item-slot {
	margin: 0;
}

.booking-calendar-options .form-item-slot input + label {
	color: var(--color-booking-calendar-option-text);
	display: block;
	padding: 0.25em;
	margin: 0.25em;
	text-align: center;
}

.booking-calendar-options .form-item-slot input {
	display: none;
}

.booking-calendar-options .form-item-slot input[data-open="true"] + label {
	background-color: var(--color-booking-calendar-open);
}

.booking-calendar-options .form-item-slot input[data-open="true"]:checked + label {
	background-color: var(--color-booking-calendar-selected);
}

.booking-calendar-options .form-item-slot input[data-in-use="true"] + label {
	background-color: var(--color-booking-calendar-booked);
	text-decoration-line: line-through;
}

.booking-calendar-options .form-item-slot input[data-in-the-past="true"] + label {
	background-color: var(--color-booking-calendar-old);
}
*/
/* }}} */