@layer theme {

	.templateEventTimetable {
		.container {
			padding: calc(var(--section) / 2);
			border: 2px solid var(--color-dark);
			border-radius: var(--large-border-radius);
			@media (max-width: 56em) {
				border-radius: var(--border-radius);
				padding: var(--gutter);
			}
			@media (--max-fablet) {
				border-radius: var(--border-radius);
				padding: var(--gutter);
			}
			.header {
				.title {
					display: inline-block;
					background: var(--color3);
					color: var(--color-light);
					padding: 8px var(--padding);
					border-radius: var(--button-radius);
					font-size: var(--s-fontsize);
					line-height: var(--s-lineheight);
					font-weight: 600;
					width: 100%;
				}
			}
		}

		.inner:not(.timetableWrap) {
			text-align: center;
			@media (min-width: 56em) {
				padding-bottom: calc(var(--gutter) * 1.5);
			}
			@media (--min-fablet) {
				padding-bottom: calc(var(--gutter) * 1.5);
			}
		}

		.timetableWrap {
			background: var(--color1);

			.splide:not(.is-active) {
				.splide__track {
					display: block;
				}
				.splide__list {
					display: flex;
					flex-direction: row;
				}
			}

			.day {
				padding: var(--gutter) var(--padding);
				padding: var(--gutter) var(--padding);
				flex: 0 0 50%;


				&:first-child {
					border-left: 2px solid var(--color-dark);
					border-right: 2px solid var(--color-dark);
				}

				&:last-child {
					border-right: 2px solid var(--color-dark);
					@media (max-width: 56em) {
						border-left: 2px solid var(--color-dark);
					}
					@media (--max-fablet) {
						border-left: 2px solid var(--color-dark);
					}
				}

				@media (max-width: 56em) {
					padding: 0 calc(var(--gutter) / 2);
					flex: 0 0 100%;
				}

				@media (--max-fablet) {
					padding: 0 calc(var(--gutter) / 2);
					flex: 0 0 100%;
				}
			}
			.items {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				.item {
					padding: var(--padding);
					border-radius: var(--border-radius);
					background: transparent;
					display: flex;
					flex-direction: column;
					gap: calc(var(--gutter) / 2);
					
					&:nth-child(even) {
						background: rgba(var(--color-light-transparency), 0.5);
					}
					@media (max-width: 56em) {
						padding: calc(var(--padding) / 2);
						border-radius: calc(var(--border-radius) / 2);
					}
					@media (--max-fablet) {
						padding: calc(var(--padding) / 2);
						border-radius: calc(var(--border-radius) / 2);
					}
		
					&.hasContent .title {
						cursor: pointer;
						border-bottom: 2px solid var(--color-dark);
						padding-bottom: 8px;
						width: fit-content;

						&:hover {
							opacity: 0.8;
						}
					}

					.title,
					.subTitle {
						color: var(--color-dark);
						font-weight: 600;
					}

					.title {
						font-size: var(--fontsize);
						appearance: none;
						background: none;
						border: none;
						padding: 0;
						margin: 0;
						text-align: left;
						font-family: inherit;
						line-height: inherit;
						cursor: default;
					}
	
					.subTitle {
						font-size: calc(var(--xs-fontsize) - 0.125rem);
						line-height: 1;
					}
				}
			}
		}

		.timetableDialog {
			border: none;
			background: var(--color3);
			color: var(--color-light);
			border-radius: var(--large-border-radius);
			padding: calc(var(--section) / 2);
			display: flex;
			flex-direction: column;
			gap: var(--gutter);

			@media (max-width: 56em) {
				border-radius: var(--border-radius);
				padding: var(--gutter);
			}

			@media (--max-fablet) {
				border-radius: var(--border-radius);
				padding: var(--gutter);
			}

			&::backdrop {
				background: rgba(var(--color-dark-transparency), 0.5);
				-webkit-backdrop-filter: blur(6px);
				        backdrop-filter: blur(6px);
			}

			.header {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				gap: var(--gutter);
				.title {
					font-size: calc(var(--m-fontsize) + 0.625rem);
					line-height: 1;
					font-weight: 400;
					color: var(--color-light);
					@media (max-width: 56em) {
						font-size: var(--m-fontsize);
					}
					@media (--max-fablet) {
						font-size: var(--m-fontsize);
					}
				}
			}
		}
	}
}