@import '../../../styles/fills';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/colors';
@import '../../../styles/mixins';

$nav-element-hover-color: $light-gray;

.desktopNav {
	display: flex;
	width: 100%;

	&_navElement {
		@include text-5;
		position: relative;
		min-height: 34px;
		color: $deep-gray;
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 10px 14px;

		&--active {
			&:before {
                @include background-primary();
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0.15;
            }
		}

		&Text {
			position: relative;
		}

		&:not(:last-of-type) {
			border-bottom: var(--item-border-bottom, 0);
		}

		&:hover, :focus{
			background-color: $nav-element-hover-color;
		}
	}

	@include media-md-up {
		&_desktopMenu {
			margin-top: 30px;
			width: 100%;
			border: 1px solid var(--desktopMenu-border-color, $gray-78);
			border-radius: 3px;
			background-color: var(--desktopMenu-background-color, $white);
			
			option {
				background-color: $white;
				display: block;
				text-decoration: none;
				@include text-6;
				line-height: 14px;
				padding: 5px;
				padding-left: 20px;
				cursor: pointer;
			}
		}
	}

	@include media-md-down {
		&_desktopMenu  {
			display: none;
		}
	}

}
