@import (reference) "./variables.less";

.@{calendar-prefix} {
	padding: 0;
	margin: 0;
	border-spacing: 0;

	& tr,
	& thead,
	& tbody {
		border: 0;
		border-spacing: 0;
	}

	& thead tr th {
		padding: 0.125em;
	}

	& td, th {
		.user-select();
		.touch-action();

		width: 3em;
		margin: 0;
		padding: 0;
		text-align: center;
		border: 0;
	}

	& td {
		.outline();

		position: relative;
		height: 3em;
		background-color: transparent;
		border-radius: @border-radius-circle;
		color: var(--text-default);
		transition: @transition-speed-fast @transition-easing;
		transition-property: color, background-color, font-size, font-weight;
		cursor: pointer;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
		}

		&:hover,
		&:focus {
			background-color: var(--transparent);
		}

		&:active {
			background-color: var(--transparent-hover);
		}

		&.@{calendar-prefix}-cell-oob {
			color: var(--text-secondary);
		}

		&[aria-current="date"] {
			color: var(--primary);

			&[aria-disabled="true"] {
				&,
				&:hover,
				&:focus,
				&:active {
					color: var(--primary-disabled);
				}
			}
		}

		&[aria-readonly="true"] {
			&,
			&:hover,
			&:focus,
			&:active {
				background-color: transparent;
				cursor: auto;
			}
		}

		&[aria-disabled="true"] {
			&,
			&:hover,
			&:focus,
			&:active {
				background-color: transparent;
				color: var(--text-disabled);
				cursor: not-allowed;
			}
		}

		&[aria-selected="true"] {
			background-color: var(--primary-muted);
			color: var(--primary-muted-color);
			font-weight: @font-weight-bold;

			&:hover,
			&:focus {
				background-color: var(--primary-muted-hover);
			}

			&:active {
				background-color: var(--primary-muted-active);
			}

			&[aria-current="date"] {
				background-color: var(--primary);
				color: var(--primary-contrast);

				&:hover,
				&:focus {
					background-color: var(--primary-hover);
				}

				&:active {
					background-color: var(--primary-active);
				}
			}

			&[aria-readonly="true"] {
				&,
				&:hover,
				&:focus,
				&:active {
					background-color: var(--primary-muted);
					color: var(--primary-muted-color);
					font-weight: @font-weight-bold;
				}

				&[aria-current="date"] {
					&,
					&:hover,
					&:focus,
					&:active {
						background-color: var(--primary);
						color: var(--primary-contrast);
					}
				}
			}

			&[aria-disabled="true"] {
				&,
				&:hover,
				&:focus,
				&:active {
					background-color: var(--bg-disabled);
					color: var(--text-disabled);
					cursor: not-allowed;
				}
			}

			& > time {
				font-size: @font-size-large;
			}
		}

		&[aria-hidden="true"] {
			&,
			&:hover,
			&:focus,
			&:active {
				background-color: transparent;
				color: inherit;
				cursor: default;
			}
		}
	}

	&-wrapper {
		display: block;
		width: fit-content;
	}

	&-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;

		&-title {
			font-size: @font-size-large;
			font-weight: @font-weight-bold;
		}

		&-start,
		&-end {
			& button + button {
				margin-inline-start: 0.25em;
			}
		}
	}
}