/* Styling van de wordpress kant (de shortcode output) */
.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 {
				.venue {
					>a {
						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: 16px;
						&:hover,
						&:focus,
						&:active {
							text-decoration: none;
							color: var(--e-global-color-text);
						}
						>span> i {
							font-size: var(--e-global-typography-text-font-size);
						} 
					}
				}
			}
			.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-list {
		.upcoming-event-item {
			margin-bottom: 20px;
			.upcoming-event-table {
				row-gap: 10px;
				flex-wrap: wrap;
				.country-flag {
					flex-basis: fit-content;
					margin-right: 15px;
				}
				.time-price {
					display: flex;
					flex-direction: column;
					margin-left: auto;
				}
				.venue-locatie-facebook {
					flex-basis: 100%;
					margin-bottom: 10px;
					.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);
					}
				}
			}
		}
	}
}