@use '_theme.scss';

.categories-navbar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-right:14px;
	overflow: hidden;

	.category-title-wrapper {
		margin-top:2px;
		white-space: nowrap;
		cursor: pointer;

		&:focus {
			outline: none;
			position: relative;

			span:after {
				position:absolute;
				content:'';
				width:100%;
				height:100%;
				top:0;
				left:10px;

				border: 2px solid var(--dark);
			}
		}

		@media (min-width: theme.$lg) {
			height: calc(var(--header-height-desktop) - 4px);
			align-items: center;
			display: flex;
		}

		&:first-child {
			.category-title{
				margin-right: 	20px;
			}
		}

		.category-spacer {
			width: 1px;
				height: 20px;
				background-color: var(--color-line);
		}

		.category-title:first-child {
			margin-left: 20px;
		}

		.category-title.highlight {
			border-bottom: 1px solid var(--color-highlight);
			color: var(--color-highlight);

			// this is a css hack for ie11
			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
				position: relative;
				top:1px;
			}
		}

		&:active, &:hover, &:link, &:visited {
			color: inherit;
			text-decoration: none;
		}
	}

	.category-title, .category-title .link{
		color: inherit;
	}

	.category-title:hover, .category-title .link:hover{
		text-decoration: none;
	}

	@media (min-width: theme.$lg) {
		height: var(--header-height-desktop);
    	line-height: 23px;
	}


	.view-show-all .popover .arrow::after {
		border-bottom-color: var(--color-fill) ;
	}

}
.popover.categories-navbar-popper {
	max-width: 981px;
	width: auto;
	font-family: inherit;
	border: none;
	box-shadow: 0 2px 4px 2px rgba(0,0,0,0.5);
	margin-right: 20px;
	margin-top:15px;

	.popover-body {
		padding: 0;
	}

	.arrow{
		filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.2));
		z-index:-1;

		&::after {
			border-width: 0 1.1rem 1.1rem 1.1rem !important;
			top: -7px !important;
		}
		&::before{
			border-bottom-color: rgba(0, 0, 0, 0) !important;;
		}
	}
}





