/*
 * Events Grid additional-view controls.
 *
 * This intentionally lives outside the block build so it is served as a
 * separately versioned theme asset after app.css.
 */

section.events [data-events-grid-native-filters][hidden],
section.events [data-events-grid-native-view][hidden] {
	display: none !important;
}

section.events .events-grid-additional-view-toggle {
	width: auto !important;
	min-width: 40px;
	flex: 0 0 auto !important;
	justify-content: center;
	padding: 4px 10px !important;
}

section.events .events-grid-additional-view-toggle::before {
	display: none;
}

section.events .events-grid-additional-view-toggle img {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	object-fit: contain;
}

section.events .events-grid-additional-view-toggle .text {
	color: #0a0203;
}

section.events .events-grid-additional-view-toggle.has-icon:not(.is-active) .text {
	display: none !important;
}

section.events .events-grid-additional-view-toggle.is-active {
	background-color: #815374 !important;
	color: #fff;
	min-width: max-content;
	padding-right: 14px !important;
}

section.events .events-grid-additional-view-toggle.is-active img {
	filter: brightness(0) invert(1);
}

section.events .events-grid-additional-view-toggle.is-active .text {
	color: #fff;
	white-space: nowrap;
}

section.events .events-grid-default-view-toggle--inactive {
	width: auto !important;
	flex: 0 0 auto !important;
}

section.events .events-grid-default-view-toggle--inactive::before,
section.events .events-grid-default-view-toggle--inactive .image-text,
section.events .events-grid-default-view-toggle--inactive .list-text {
	display: none !important;
}

section.events .events-grid-default-view-toggle--inactive.image-view .image-icon {
	filter: brightness(0) saturate(100%) invert(35%) sepia(18%) saturate(1720%) hue-rotate(256deg) brightness(86%) contrast(85%);
}

section.events .events_filter .right_side {
	flex: 0 0 auto;
}

section.events .events_filter .view-toggle-container {
	width: max-content;
	flex-wrap: nowrap;
}

section.events .events_filter.events-grid-additional-view-active .relative-container {
	justify-content: flex-end;
}

section.events .events_filter.events-grid-additional-view-active .right_side {
	width: auto !important;
	margin-left: auto;
}

section.events .events-grid-additional-view {
	margin-top: 32px;
}