// Flatpickr - MonthPicker
.osui-monthpicker__dropdown {
	&.flatpickr-calendar {
		width: auto;
	}

	.flatpickr-months {
		padding-bottom: 0;
	}
}

.flatpickr-monthSelect-months {
	display: grid;
	gap: var(--space-xs);
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	margin: 0;

	.flatpickr-monthSelect-month {
		align-items: center;
		border: 1px solid get-border-color('transparent');
		border-radius: var(--border-radius-soft);
		display: flex;
		height: 40px;
		margin: 0;
		min-width: 70px;
		width: 100%;

		&:hover,
		&:focus {
			background: get-background-color('neutral-2');
		}

		&.selected {
			background-color: get-background-color('primary');
			border-color: get-border-color('transparent');
			color: get-text-color('neutral-0');
		}

		&.flatpickr-disabled {
			background-color: get-background-color('neutral-1');
			color: get-text-color('neutral-5');

			&:hover {
				background-color: get-background-color('neutral-1') !important; // override provider !important rule
			}

			&.today:hover,
			&.today:focus {
				border: none;
			}
		}

		&.today:not(.selected):not(.flatpickr-disabled) {
			border-color: get-border-color('neutral-6');

			&:hover,
			&:focus {
				background: get-background-color('neutral-3');
				border-color: get-border-color('neutral-3');
				color: get-text-color('primary');
			}
		}
	}
}

// RTL
.is-rtl {
	.osui-monthpicker__dropdown {
		.flatpickr-monthSelect-months {
			direction: rtl;
		}
	}
}