@import '../../../styles/_partials/index';

.TertiaryNavContainer {
	display: flex;
	flex-direction: row;
	flex: 1; // this assumes its parent is a flex element
	overflow-y: auto;
	@include theme-background-white-else-graydark;

	// needs to be global so any element, outside this library, can use it
	:global(.TertiaryNavChild__Error) {
		@include theme-color-red-dark50-else-red;
	}

	// reset unordered lists
	ul,
	ul li,
	ul ul li {
		margin: 0;
		padding: 0;
		text-indent: 0;
		list-style-type: none;
	}

	.TertiaryNav {
		width: 200px;
		padding: 16px 12px;
		overflow-y: auto;
		@include theme-border-right;
	}

	.TertiaryNavItem {
		a {
			position: relative;
			display: inline-block;
			width: 100%;
			height: 36px;
			line-height: 36px;
			padding: 1px 20px 0;
			border-radius: 4px;
			@include theme-color-gray-else-gray25;
			font-size: 14px;
			@include tracking(40);

			&:hover {
				@include theme-color-graydark-else-white;
			}
		}

		a.TertiaryNavItem__Active {
			font-weight: 700;
			@include theme-color-graydark-else-white;
			@include if-theme-light() {
				background: $gray5;
			}
			@include if-theme-dark() {
				background: $gray-dark50;
			}

			svg path {
				fill: $white;
			}
		}

		&.TertiaryNavItem__Error a {
			@include __theme-color($red-darker, $white);
			padding-left: 34px;
		}

		&.TertiaryNavItem__Error a::before {
			content: '';
			position: absolute;
			top: 0;
			left: 12px;
			width: 16px;
			height: 100%;
			-webkit-mask: url(../../../svg/warning.svg) no-repeat 50% 50%;
			mask: url(../../../svg/warning.svg) no-repeat 50% 50%;
			@include __theme-background($red-darker, $red);
		}
	}

	.TertiaryContent {
		flex: 1;
		overflow: inherit;
		position: relative;
	}
}