/* TimeRangesEditor */
.hourgate-time-ranges {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hourgate-time-ranges__head,
.hourgate-time-ranges__fields {
	display: grid;
	grid-template-columns: minmax(7rem, 9rem) 1rem minmax(7rem, 9rem) auto;
	align-items: start;
	gap: 0.5rem;
}

.hourgate-time-ranges__head {
	font-size: 0.75rem;
	color: var(--hourgate-text-secondary-color);
}

.hourgate-time-ranges__head span:nth-child(2) {
	grid-column: 3;
}

.hourgate-time-ranges__dash {
	align-self: center;
	text-align: center;
}

.hourgate-time-ranges__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hourgate-time-ranges__hint {
	color: var(--hourgate-text-secondary-color);
	font-size: 0.75rem;
}

.hourgate-time-ranges__row > .hourgate-form-field-error-msg {
	font-size: 0.75rem;
}

.hourgate-time-ranges__remove {
	appearance: none;
	background: none;
	border: 0.0625rem solid transparent;
	border-radius: 0.25rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	color: var(--hourgate-text-secondary-color);
	cursor: pointer;
}

.hourgate-time-ranges__remove:hover:not(:disabled) {
	color: var(--hourgate-danger-color);
	border-color: var(--hourgate-border-color);
}

.hourgate-time-ranges__remove:focus-visible {
	outline: 0.125rem solid var(--hourgate-primary-color);
	outline-offset: 0.0625rem;
}

.hourgate-time-ranges__add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.hourgate-time-ranges__add .hourgate-button {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

@media (max-width: 480px) {
	.hourgate-time-ranges__head,
	.hourgate-time-ranges__fields {
		grid-template-columns: minmax(0, 1fr) 0.75rem minmax(0, 1fr) auto;
	}

	/* Let the time inputs shrink with their columns. */
	.hourgate-time-ranges .hourgate-time-field input[type="time"] {
		min-width: 0;
		padding: 0 0.25rem;
	}

	/* The clock icon costs about 20 px and clipped "AM" at 360 px wide.
	   Typing still works, and phones open their own picker on tap. */
	.hourgate-time-ranges .hourgate-time-field input[type="time"]::-webkit-calendar-picker-indicator {
		display: none;
	}
}