@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/overflow';
@use '@lucca-front/scss/src/components/button/exports' as button;
@use '@lucca-front/scss/src/components/link/exports' as link;

@mixin component($atRoot: 'without: rule') {
	inline-size: var(--components-calendarWidth);

	@at-root ($atRoot) {
		.calendarShortcutsOptional {
			display: flex;
		}

		.calendarShortcuts {
			@include reset.list;

			inline-size: 13.5rem;
			border-inline-end: 1px solid var(--palettes-neutral-100);
			padding: var(--pr-t-spacings-50);
			overflow: auto;
			position: relative;
			z-index: 1;
			border-radius: var(--pr-t-border-radius-default) 0 0 var(--pr-t-border-radius-default);

			&:focus-visible {
				@include a11y.focusVisible;
			}

			&.mod-day {
				max-block-size: 19.25rem;

				&:has(+ .calendarWrapper .calendar-todayLink) {
					max-block-size: 21.75rem;
				}
			}

			&.mod-month,
			&.mod-year {
				max-block-size: 18rem;
			}
		}

		.calendarShortcutsButton-item-button.button {
			@include button.block;
			@include button.ghost;
			@include button.S;

			justify-content: flex-start;
			font-weight: var(--pr-t-font-fontWeight-regular);
			white-space: wrap;
			text-align: start;
		}

		.calendar-table {
			border-spacing: var(--components-calendarBorderSpacing);
			border: var(--pr-t-spacings-150) solid transparent;
			border-block-start: 0;
			table-layout: fixed;
			background-color: var(--components-calendarBackground);
			scroll-snap-align: start end;
			flex-shrink: 0;
			flex-grow: 0;
			inline-size: 100%;
			empty-cells: hide;
		}

		.calendarWrapper {
			background-color: var(--components-calendarWrapperBackground);
			position: relative;

			&:has(.calendar-table-body-row-cell-action:focus-visible) {
				&:has(.calendar-table-body-row-cell-action:hover) {
					.calendar-table-body-row-cell-action:hover:not(:focus-visible) {
						outline: none;
					}
				}
			}
		}

		.calendarWrapper-content {
			display: flex;
			overflow: auto;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;

			@include overflow.hide;

			&:focus-visible {
				@include a11y.focusVisible;
			}
		}

		.calendarWrapper-navigation {
			position: absolute;
			inset-block-start: 0;
			background-color: var(--components-calendarWrapper-navigationBackground);
			border-width: var(--pr-t-spacings-150);
			border-style: solid;
			border-color: var(--components-calendarWrapper-navigationBackground);
			border-radius: var(--pr-t-border-radius-default);
		}

		.calendarWrapper-navigation-button {
			&.button {
				@include button.ghost;
				@include button.onlyIconXS;
			}
		}

		.calendar-stripes {
			@include a11y.mask;
		}

		.calendar-divider {
			&.divider {
				margin: 0;
			}
		}

		.calendar-todayLink {
			&.link {
				text-transform: capitalize;
				display: block;
				margin: auto;
				padding: var(--pr-t-spacings-100);
				line-height: var(--pr-t-font-body-M-lineHeight);

				@include link.decorationHover;

				&:focus-visible {
					@include a11y.focusVisible($offset: -4px, $borderRadius: 8px);
				}
			}
		}

		.calendar-stripes-symbol-path {
			fill: var(--components-calendar-table-body-row-cell-action-stripesColor);
		}

		.calendar-name {
			font: var(--pr-t-font-heading-3);
			padding-block: var(--pr-t-spacings-50);
			padding-inline: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-100));
			border: var(--pr-t-spacings-150) solid transparent;
			border-block-end: var(--pr-t-spacings-100) solid transparent;
			text-transform: lowercase;
			background-color: var(--components-calendarBackground);
			text-align: center;
		}

		.calendar-name-button {
			@include reset.button;

			border-radius: var(--pr-t-border-radius-default);
			text-align: inherit;
			inline-size: fit-content;
			display: inline-block;
			padding: var(--pr-t-spacings-50);
			margin-block: calc(var(--pr-t-spacings-50) * -1);

			&:hover {
				color: var(--palettes-700, var(--palettes-product-700));
			}

			&:active {
				color: var(--palettes-800, var(--palettes-product-800));
			}

			&:focus-visible {
				@include a11y.focusVisible($offset: 0);
			}

			& + & {
				margin-inline-start: calc(var(--pr-t-spacings-100) * -1);
			}
		}

		.calendar-table-head-row-cell,
		.calendar-table-body-row-cell {
			padding: var(--pr-t-spacings-25);
			block-size: var(--pr-t-spacings-400);
			box-sizing: content-box;
		}

		.calendar-table-head-row-cell {
			font: var(--pr-t-font-body-S);
			color: var(--pr-t-color-text-subtle);
			text-transform: uppercase;
			border-block-end: var(--pr-t-spacings-50) solid transparent;
		}

		.calendar-table-body-row-cell {
			position: relative;
			color: var(--palettes-neutral-700);

			&::before {
				background-color: var(--palettes-50, var(--palettes-product-50));
				position: absolute;
				inset: var(--pr-t-spacings-25) 0;
				content: var(--components-calendar-table-body-row-cellSelectedBeforeContent);
				border-radius: var(--components-calendar-table-body-row-cellSelectedBeforeBorderRadius);
			}
		}

		.calendar-table-body-row-cell-action {
			@include reset.button;

			border-radius: var(--pr-t-border-radius-default);
			position: relative;
			z-index: 1;
			text-align: center;
			overflow: hidden;
			font-weight: var(--components-calendar-table-body-row-cell-actionFontWeight);
			color: var(--components-calendar-table-body-row-cell-actionColor);
			background-color: var(--components-calendar-table-body-row-cell-actionHighlight);
			display: var(--components-calendar-table-body-row-cell-actionDisplay);
			block-size: 100%;
			text-transform: lowercase;
			cursor: var(--components-calendar-table-body-row-cell-actionCursor);

			/* autoprefixer: off */
			text-decoration: var(--components-calendar-table-body-row-cell-actionTextDecoration);
			box-shadow:
				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight),
				0 0 0 1px var(--components-calendar-table-body-row-cell-actionHighlight) inset;

			&:not(:disabled, [aria-disabled='true']) {
				&:hover {
					@include a11y.focusVisible;

					outline-width: var(--components-calendar-table-body-row-cell-actionOutlineWidth);
					outline-offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset);
					outline-color: var(--palettes-700, var(--palettes-product-700));
				}

				&:active {
					outline: 2px solid var(--palettes-800, var(--palettes-product-800));
					background-color: var(--palettes-800, var(--palettes-product-800));
					color: var(--palettes-0, var(--palettes-product-0));
				}
			}

			&:focus-visible {
				@include a11y.focusVisible;

				outline-width: var(--components-calendar-table-body-row-cell-actionOutlineWidth);
				outline-offset: var(--components-calendar-table-body-row-cell-actionOutlineOffset);
				outline-color: var(--palettes-700, var(--palettes-product-700));
			}
		}

		.calendar-table-body-row-cell-action-stripes {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 60px;
			block-size: 60px;
			z-index: -1;
			display: var(--components-calendar-table-body-row-cell-action-stripesDisplay);
		}
	}
}