/**
 * name: date-pickle
 * version: v0.0.3
 * author: Justin Wiblin <justin.wiblin@mcsrentalsoftware.com>
 * contributers:
 *	 Justin Wiblin <justin.wiblin@mcsrentalsoftware.com>,
 *	 Colin Upfield <colin.upfield@mcsrentalsoftware.com>
 */
:root {
	--pickle-background: Canvas;
	--pickle-nav: color-mix(in oklab, var(--pickle-background), currentColor 30%);
	--pickle-hover: color-mix( in oklab, var(--pickle-background), currentColor 50% );
	--pickle-active: #85a16a;
	--pickle-today: #85a16a;
	--pickle-icon-font: "FontAwesome";
	--pickle-previous-icon: "\f053";
	--pickle-next-icon: "\f054";
	--pickle-time-icon: "\f017";
}

.date-pickle {
	background-color: var(--pickle-background);
	padding: 2px;
	display: none;
	min-width: 28ch;
	border-radius: 4px;
	border: 1px solid currentColor;
}

	.date-pickle.in {
		display: grid;
	}

.pickle-nav {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px;
	background-color: var(--pickle-nav);
	margin-block-end: 6px;
	font-weight: bold;
}

.pickle-nav-label {
	grid-column: 2;
}

.pickle-date {
	display: grid;
	grid-template-columns: repeat(7, auto);
}

.pickle-months {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 2px;
	padding: 2px;
}

.pickle-years {
	display: grid;
	grid-template-columns: repeat(5, auto);
	gap: 2px;
	padding: 2px;
}

.pickle-hours {
	display: grid;
	grid-template-columns: repeat(6, auto);
	gap: 2px;
	padding: 2px;
}

.pickle-minutes {
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 2px;
	padding: 2px;
}

.pickle-days,
.pickle-day-headers {
	grid-column: 1 / -1;
	display: grid;
	gap: 2px;
	grid-template-columns: subgrid;
}

.pickle-day,
.pickle-day-header,
.pickle-month,
.pickle-year {
	align-content: center;
	justify-items: center;
	text-align: center;
}

.pickle-time {
	display: flex;
	justify-content: space-around;
}

.pickle-hour,
.pickle-minute {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pickle-button {
	background: none;
	border: none;
	border-radius: 4px;
	padding: 10px;
	color: currentColor;
	font-weight: inherit;
}

	.pickle-button:hover {
		background: var(--pickle-hover);
	}

	.pickle-button.active {
		color: white;
		background-color: var(--pickle-active);
	}

	.pickle-button:disabled {
		color: color-mix(in lab, currentColor, rgba(0, 0, 0, 0) 30%);
		cursor: not-allowed;
	}

	.pickle-button.other-view:not(.active) {
		color: color-mix(in lab, currentColor, rgba(0, 0, 0, 0) 30%);
	}

.pickle-today {
	position: relative;
}

	.pickle-today::before {
		content: "";
		position: absolute;
		inset: 15%;
		/* top-left corner: horizontal and vertical segments */
		background: linear-gradient(var(--pickle-today), var(--pickle-today)) no-repeat top left, linear-gradient(var(--pickle-today), var(--pickle-today)) no-repeat top left,
		/* bottom-right corner: horizontal and vertical segments */
		linear-gradient( var(--pickle-today), var(--pickle-today) ) no-repeat bottom right, linear-gradient(var(--pickle-today), var(--pickle-today)) no-repeat bottom right;
		background-size: 30% 3px, /* top-left horizontal line: 30px long, 3px thick */
		3px 30%, /* top-left vertical line: 3px thick, 30px long */ 30% 3px, /* bottom-right horizontal line */
		3px 30%; /* bottom-right vertical line */
		background-clip: padding-box;
	}

	.pickle-today.active {
		--pickle-today: currentColor;
	}
/* .pickle-today::before {
	content: "\f077";
	position: absolute;
	left: 2px;
	top: 2px;
	font-size: 1em;
	color: var(--pickle-today);
	font-family: var(--pickle-icon-font);
	rotate: -45deg;
}
.pickle-today::after {
	content: "\f077";
	position: absolute;
	right: 2px;
	bottom: 2px;
	font-size: 1em;
	color: var(--pickle-today);
	font-family: var(--pickle-icon-font);
	rotate: 135deg;
} */

.pickle-time-button {
	grid-column: 1 / -1;
}

.pickle-time-button,
.pickle-next,
.pickle-previous {
	font-size: 1em;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: var(--pickle-icon-font);
}

	.pickle-next::before {
		content: var(--pickle-next-icon);
	}

	.pickle-previous::before {
		content: var(--pickle-previous-icon);
	}

	.pickle-time-button::before {
		content: var(--pickle-time-icon);
	}