/* -----------------------------------------------------------------------------
 *
 * Events Bar
 *
 * ----------------------------------------------------------------------------- */

.tribe-events {

	.tribe-events-c-events-bar {
		display: flex;

		.tribe-common--breakpoint-medium& {
			flex-direction: row;
		}
	}

	.tribe-events-c-events-bar__views {
		display: flex;
		flex: none;
		justify-content: center;
	}

	.tribe-events-c-events-bar__search-filters-container {
		background-color: var(--color-background);
		display: none;
		left: 0;
		padding: var(--spacer-2) var(--grid-gutter-small-half);
		position: absolute;
		right: 0;
		top: calc(100% - var(--spacer-2));
		z-index: var(--z-index-dropdown);

		.tribe-common--breakpoint-medium& {
			align-items: center;
			display: flex;
			flex: auto;
			padding: 0;
			position: static;
			z-index: auto;
		}
	}

	.tribe-events-c-events-bar__search {

		.tribe-common--breakpoint-medium& {
			display: flex;
			flex: auto;
		}
	}

	.tribe-events-c-events-bar__search-form {
		width: 100%;
	}

	.tribe-events-c-events-bar__filters {
		display: flex;
		flex: none;
		justify-content: flex-end;
		margin-right: -12px;

		.tribe-common--breakpoint-medium& {
			margin: var(--spacer-2) 0;
		}
	}

	.tribe-events-c-events-bar__filters-button {
		@mixin hidden;

		.tribe-common--breakpoint-medium& {
			align-items: center;
			display: flex !important;
			margin: calc(var(--spacer-2) * -1) 0;
			padding: var(--spacer-4) var(--spacer-5);
			visibility: visible;
		}

		&:hover,
		&:focus,
		&:active {

			.tribe-common--breakpoint-medium& {

				&:before {
					background-image: svg-inline(filters-active);
				}
			}
		}

		&:before {

			.tribe-common--breakpoint-medium& {
				background-image: svg-inline(filters);
				background-repeat: no-repeat;
				background-size: contain;
				background-size: 17px;
				content: '';
				display: inline-block;
				flex: none;
				height: 17px;
				margin-right: var(--spacer-1);
				width: 17px;
			}
		}
	}

	.tribe-events-c-events-bar__search-button {
		display: inline-block;
		margin-right: var(--spacer-1);
		padding: var(--spacer-0);
		position: relative;


		.tribe-common--breakpoint-medium& {
			@mixin hidden;
		}
	}

	.tribe-events-c-events-bar__search-button-icon {
		background-image: svg-inline(search-active);
		display: block;
		height: 21px;
		width: 21px;
	}

	.tribe-events-c-events-bar__search-button-icon--filter {
		background-image: svg-inline(search-filter);
		width: 31px;

		& + .tribe-events-c-events-bar__search-button-icon {
			@mixin hidden;
		}
	}

	.tribe-events-c-events-bar__tabs {
		display: flex;
		padding-bottom: var(--spacer-2);

		.tribe-common--breakpoint-medium& {
			@mixin hidden;
		}
	}

	.tribe-events-c-events-bar__tab {
		align-items: center;
		display: flex;
		flex: 1 1 50%;
		flex-direction: column;
		margin: 0 var(--spacer-0);
		padding: var(--spacer-3) 0;

		&:hover,
		&:focus,
		&:active {

			.tribe-common-svgicon--search {
				background-image: svg-inline(search-active);
			}

			.tribe-common-svgicon--filters {
				background-image: svg-inline(filters-active);
			}
		}

		&:first-of-type {
			margin-left: 0;
		}

		&:last-of-type {
			margin-right: 0;
		}
	}

	.tribe-events-c-events-bar__tab--active {

		.tribe-common-svgicon--search {
			background-image: svg-inline(search-active);
		}

		.tribe-common-svgicon--filters {
			background-image: svg-inline(filters-active);
		}
	}

	.tribe-events-c-events-bar__tab-icon {
		height: 16px;
		margin-bottom: var(--spacer-0);
		width: 16px;
	}

	/* -----------------------------------------------------------------------------
	 *
	 * Events Bar: Theme Overrides
	 *
	 * ----------------------------------------------------------------------------- */

}