/**
 * The login button, waterworks picker and signup menu in the event sidebar.
 *
 * The theme already styles .custom-select and .wp-block-button; this only
 * adapts them to the dark blue sidebar, where black borders and text would
 * disappear, and to buttons that need the full width rather than the theme's
 * half — it sizes .sidebar-event .wp-block-button at 50% to sit beside a toggle
 * the GoodiePack sidebar does not have.
 *
 * Loaded at priority 20, after the theme's own stylesheet, so a rule of the
 * same specificity wins rather than losing on source order.
 */

.sidebar-event__waterworks {
	margin-top: var(--spacing-20);
}

.sidebar-event__waterworks-label {
	display: block;
	margin-bottom: var(--spacing-5);
}

.sidebar-event .sidebar-event__waterworks-select select {
	width: 100%;
	margin-left: 0;
	color: var(--color-white);
	border-color: var(--color-white);
	background-color: transparent;
}

.sidebar-event .sidebar-event__waterworks-select select:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* The open dropdown list is drawn by the OS on its own background. */
.sidebar-event .sidebar-event__waterworks-select option {
	color: var(--color-black);
	background-color: var(--color-white);
}

/* The chevron the theme puts in ::after. */
.sidebar-event .sidebar-event__waterworks-select::after {
	color: var(--color-white);
}

/* The theme sizes the register button to half the width, next to a toggle the
   GoodiePack sidebar does not have; the longer login label needs all of it. */
.sidebar-event .sidebar-event__buttons .sidebar-event__login {
	flex-basis: 100%;
}

/**
 * The signup page menu, when an event has more than one.
 *
 * A <details> so it needs no JavaScript. The list expands in flow rather than
 * floating over the sidebar, because .sidebar-event sets overflow: hidden and
 * would clip an absolutely positioned menu.
 */
.sidebar-event .sidebar-event__signup {
	flex: 1 1 100%;
	padding-left: 0;
}

.sidebar-event .sidebar-event__signup > summary {
	cursor: pointer;
	list-style: none;
	width: 100%;
	gap: var(--spacing-10);
}

/* Safari draws its own triangle. */
.sidebar-event .sidebar-event__signup > summary::-webkit-details-marker {
	display: none;
}

/* The theme's chevron, the same one .custom-select uses. */
.sidebar-event .sidebar-event__signup > summary::after {
	content: '\e905';
	font-family: 'icomoon';
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
	transition: var(--transition-fast);
}

.sidebar-event .sidebar-event__signup[open] > summary::after {
	transform: scaleY(-1);
}

.sidebar-event .sidebar-event__signup-options {
	list-style: none;
	margin: var(--spacing-10) 0 0 0;
	padding: 0;
}

.sidebar-event .sidebar-event__signup-options li + li {
	margin-top: var(--spacing-5);
}

.sidebar-event .sidebar-event__signup-options a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--spacing-10) var(--spacing-20);
	border: 1px solid var(--color-white);
	border-radius: var(--border-radius-m);
	color: var(--color-white);
	font-size: var(--size-s);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: var(--transition-fast);
}

.sidebar-event .sidebar-event__signup-options a:hover,
.sidebar-event .sidebar-event__signup-options a:focus {
	background-color: var(--color-white);
	color: var(--color-blue-dark);
}