/* Styling van de wordpress kant (de shortcode output) */
.upcoming-events-wrapper {
	.upcoming-events-tabs {
		display: flex;
		justify-content: space-around;
		margin: 0 30px 20px;
		border-bottom: 2px solid color-mix(in srgb, var(--e-global-color-accent), transparent 80%);
		.upcoming-events-tab {
			margin: 0 0 -2px;
			padding: 8px 4px 14px;
			cursor: pointer;
			opacity: .5;
			border-bottom: 2px solid transparent;
			transition: opacity .2s ease, border-color .2s ease;
			&:hover {
				opacity: .8;
			}
			&.is-active {
				opacity: 1;
				border-color: var(--e-global-color-accent);
			}
		}
	}
	.upcoming-events-panel {
		display: none;
		&.is-active {
			display: block;
		}
	}
	.upcoming-events-pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		width: 100%;
		margin: 16px 0 0;
		padding: 14px 30px 0;
		.uep-btn {
			background: none;
			border: none;
			cursor: pointer;
			font-size: 1.1rem;
			line-height: 1;
			color: var(--e-global-color-text);
			padding: 6px 10px;
			border-radius: 4px;
			transition: background-color .2s ease, opacity .2s ease;
			&:hover:not(:disabled) {
				background-color: color-mix(in srgb, var(--e-global-color-primary), transparent 85%);
			}
			&:disabled {
				opacity: .3;
				cursor: default;
			}
		}
		.uep-counter {
			font-variant-numeric: tabular-nums;
			opacity: .8;
			min-width: 5em;
			text-align: center;
		}
	}
}

.upcoming-events-list {
	padding: 0 30px;
	margin: 0 auto;
	.upcoming-event-item {
		width: 100%;
		padding: 16px 24px;
		border: 2px solid color-mix(in srgb, var(--e-global-color-accent), transparent 60%);
		border-radius: 6px;
		margin-bottom: 8px;
		&.highlighted {
			box-shadow: 0 0 15px 0 var(--e-global-color-primary);
		}
		.upcoming-event-title {
			margin-bottom: 0;
		}
		p {
			margin-bottom: 0;
		}
		svg {
			width: .9rem;
			height: .9rem;
			margin-right: 2px;
			path {
				fill: currentcolor;
			}
		}
		&:hover {
			background-color: color-mix(in srgb, var(--e-global-color-primary), transparent 80%);
			border-color: color-mix(in srgb, var(--e-global-color-primary), transparent 80%);
			.upcoming-event-table .ticketbutton-container {
				a.upcoming-event-ticket-sale {
					border-color: color-mix(in srgb, var(--e-global-color-accent), transparent 80%);
				}
			}
		}
		.upcoming-event-table {
			display: flex;
			gap: 5%;
			align-items: center;
			.country-flag {
				margin-right: -25px;
				.fi {
					width: 1.75em;
					line-height: 2em;
				}
			}
			.date-time {
				min-width: 10vw;
				display: flex;
				flex-direction: column;
				justify-content: center;
				line-height: 1.6em;
				p {
					margin-bottom: 0;
				}
				.month {
					opacity: .6;
					text-transform: uppercase;
				}
				.year {
					opacity: .6;
				}
				.day {
					text-transform: uppercase;
				}
				> span ~ span {
					margin-left: 4px;
				}
			}
			.time-price {
				width: 70px;
				> div {
					display: flex;
					gap: 8px;
					align-items: center;
					justify-content: flex-end;
				}
				i {
					color:var(--e-global-color-text);
					font-size: 80%;
					opacity: .7;
				}
				.upcoming-event-entrance-fee {
					text-align: right;
					width: 100%;
					display: block;
				}
			}

			.venue-locatie-facebook {
				max-width: 100%;
				.venue {
					margin-bottom: 8px;
					> span {
						line-height: 1.35em;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					>a {
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						text-decoration: none;
						&:hover,
						&:focus,
						&:active {
							text-decoration: underline;
						}
					}
					.upcoming-event-show-type {
						padding-right: 4px;
						margin-right: 4px;
						border-right: 1.5px solid var(--e-global-color-text);
					}
				}
				.locatie-facebook {
					.upcoming-event-city {
						line-height: 1em;
					}
					a {
						text-decoration: none;
						margin-left: 10px;
						&:hover,
						&:focus,
						&:active {
							text-decoration: none;
							color: var(--e-global-color-text);
						}
						>span.upcoming-event-facebook-event > i.dashicons-facebook {
							font-family: dashicons;
							font-style: normal;
							vertical-align: bottom;
							font-size: var(--e-global-typography-text-font-size);
							&::before {
    							content: "\f304";
							}
						} 
					}
				}
			}
			.ticketbutton-container {
				margin-left: auto;
				display: flex;
				a.upcoming-event-ticket-sale {
					padding: 20px 24px;
					border-radius: 6px;
					border: 2px solid color-mix(in srgb, var(--e-global-color-accent), transparent 60%);
					text-transform: uppercase;
					text-decoration: none;
					&:hover {
						box-shadow: 0 0 14px -2px #000000a1;
						border-color: var(--e-global-color-accent);
					}
				}
				.soldout-message {
					padding: 16px;
					border-radius: 6px;
					border: 2px solid color-mix(in srgb, var(--e-global-color-accent), white 60%);
					text-transform: uppercase;
					text-decoration: none;
					&:hover {
						box-shadow: 0 0 14px -2px #000000a1;
					}
				}
			}
		}
	}
}

@media (max-width: 700px) {
	.upcoming-events-wrapper {
		.upcoming-events-pagination {
			gap: 8px;
			.uep-counter {
				min-width: 4em;
			}
		}
	}
	.upcoming-events-list {
		.upcoming-event-item {
			margin-bottom: 20px;
			.upcoming-event-table {
				row-gap: 10px;
				flex-wrap: wrap;
				.country-flag {
					flex-basis: 100%;
					text-align: center;
				}
				.date-time {
					flex-basis: 100%;
					text-align: center;
				}
				.time-price {
					display: flex;
					flex-basis: 100%;
					text-align: center;
					flex-direction: column;
					.upcoming-event-entrance-fee {
						text-align: center;
					}
					> div {
						justify-content: center;
					}
				}
				.venue-locatie-facebook {
					flex-basis: 100%;
					.venue,
					.locatie-facebook {
						text-align: center;
					}
				}
				.ticketbutton-container {
					margin-left: unset;
					width: 100%;
					a.upcoming-event-ticket-sale {
						text-align: center;
						width: 100%;
						padding: 10px 24px;
						border-color: var(--e-global-color-primary);
					}
					.soldout-message {
						width: 100%;
						text-align: center;
					}
				}
			}
		}
	}
}