@import "../utils/variables";
@import "../utils/mixins";


// Timetable and Event Schedule
.mptt-shortcode-wrapper {
	.mptt-navigation-tabs{
		padding: 0;
		margin: 0;
		text-align: center;

		li{
			padding: 0;
			margin: 0 0 5px;
			line-height: 32px;

			a{
				background: #f0f0f0;
				padding: 7px 10px;
				border-radius: 2px;
				text-decoration: none;
				position: relative;

				.dark-skin &{
					background: $dark-bg;
				}

				&:before{
					content: '';
					position: absolute;
					bottom: 0;
					left: calc(50% - 5px);
					width: 0;
					height: 0;
					opacity: 0;
					border-style: solid;
					border-width: 5px 5px 0 5px;
					border-color: #ffffff transparent transparent transparent;
					transition: bottom 0.3s, opacity 0.1s;

					.dark-skin &{
						border-color: $darker-bg transparent transparent transparent;
					}
				}
			}

			&:not(.active) a{
				color: #555;

				.dark-skin &{
					color: $dark-base-color;
				}
			}

			&.active a{
				background: #ffffff;

				&:before{
					bottom: -5px;
					opacity: 1;
				}

				.dark-skin &{
					background: $darker-bg;
					color: #ffffff;
				}
			}
		}

		~ table{
			margin-top: 8px;
		}
	}

	.mptt-shortcode-list {
		.mptt-column {
			margin: 0;

			.mptt-column-title{
				margin: 10px 0 0;
				padding: 5px 10px;
				border-bottom: $base-border;
				font-weight: normal;
				background: #ffffff;
			}

			.mptt-event-title{
				font-weight: bold;
			}

			.mptt-events-list{
				margin: 0;

				.mptt-list-event{
					margin-bottom: 0;
					border-width: 10px;
					border-bottom: $base-border;
					background: #ffffff;
					padding: 5px 10px;
				}
			}
		}
	}
}

.mptt-event-container{
	transition: 0.3s;
	min-height: 0;
}

.mptt-inner-event-content{
	position: relative;
	transform: translateY(-50%);
	top: 50%;
}

.mptt-shortcode-wrapper .mptt-shortcode-table tbody{
	.mptt-event-container{
		&:hover .event-title{
			text-decoration: none;
		}
	}

	tr:nth-child(odd){
		background-color: #fafafa;
	}
}

.dark-skin .mptt-shortcode-wrapper {
	.mptt-shortcode-table{
		thead th{
			background: $darker-bg;
			color: #ffffff;
		}

		thead th,
		tbody td{
			border-color: lighten($dark-bg, 10%);
		}

		.mptt-event-container{
			outline: lighten($dark-bg, 10%);
		}

		tr:nth-child(odd){
			background: $dark-bg;
		}

		tr:nth-child(even){
			background: $darker-bg;
		}
	}

	.mptt-shortcode-list {
		// background: $dark-bg;

		.mptt-column {
			.mptt-column-title{
				background: $darker-bg;
				border-color: $base-border-color-in-white;
			}
			.mptt-events-list{
				.mptt-list-event{
					background: $dark-bg;
					border-color: $base-border-color-in-white;
				}
			}
		}
	}
}