@import '../../../styles/definitions/mixins';
@import '../../../styles/definitions/colors';

// Local Variables
$namespace: ".tabsMenu";
$menu-nav-height: 45px;
$menu-nav-spacing: 6px;
$menu-nav-bgcolor: "transparent";
$menu-nav-border-height: 1px;
$menu-nav-border-color: $gray;
$menu-item-spacing: 40px;
$menu-link-color: $gray-61;
$menu-link-border-height: 2px;
$menu-link-color-selected: $deep-gray;
$menu-link-border-color-selected: $primary-color;

$menu-button-width: 70px;
$menu-button-width-xs: 50px;
$menu-button-color: $white;

// Mobile
$menu-nav-bgcolor-mobile: $header-bg-color;
$menu-top-nav-min-height-mobile: 54px;
$menu-link-color-mobile: $faint-gray;
$menu-link-bgcolor-mobile: $gray-20;
$menu-list-zindex: 2;

// Component Styles
#{$namespace} {
	&_stickyContainer {
		position: sticky;
		top: 0;
		z-index: 5;
	}
    &_nav {
		position: relative;

		&:after {
			@include full-window-width;
			content: "";
			background-color: var(--backgroundColor, $menu-nav-bgcolor);
		}

		&:not(&--mobile) {
			&:after {
				border-bottom: $menu-nav-border-height solid var(--borderColor, $menu-nav-border-color);
			}
		}

		&--mobile {
			&:after {
				background-color: $menu-nav-bgcolor-mobile;
				border-bottom: 0;
			}
		}

		&:empty {
			&:after {
				display: none;
			}
		}
	}

	&_topNav,
	&_list {
		position: relative;
		z-index: $menu-list-zindex;
	}

	&_topNav {
		$thumbnail-size: 36px;

		position: relative;
		display: flex;
		align-items: center;
		min-height: $menu-top-nav-min-height-mobile;
		padding: 6px $header-padding-x;

		&--with-nav {
			padding-left: $menu-button-width;

			@include media-xs-down {
				padding-left: $menu-button-width-xs;
			}
		}

		&Thumbnail {
			display: block;
			margin-right: 3vw;
			width: $thumbnail-size;
			height: $thumbnail-size;
			@include fit();
		}

		&Button {
			$button-spacing: 9px;
			$button-padding: 6px;
			$button-icon-width: 14px;

			position: relative;
			margin-top: 2px;
			margin-bottom: 2px;

			.button_text {
				padding-left: $button-padding;
				padding-right: $button-padding;
			}

			svg {
				position: absolute;
				top: 50%;
				left: $button-padding;
				display: none;
				width: $button-icon-width;
				fill: $white;
				transform: translateY(-50%);
			}
			
			&:not(:first-of-type) {
				margin-left: $button-spacing;
			}

			@include media-sm-up {
				svg {
					display: block;
				}

				&--with-icon {
					.button_text {
						padding-left: $button-padding + $button-icon-width + 3px;
					}
				}
			}
		}
	}

	&_menu {
		@include media-lg-down {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: $menu-nav-bgcolor-mobile;

			&:after {
				@include full-window-width;
				content: "";
				background-color: $menu-nav-bgcolor-mobile;
			}
		}
	}

	&_list {
		@extend %reset-list;

		@include media-lg-up {
			display: flex;
			position: relative;
			min-height: var(--height, $menu-nav-height);
		}

		@include media-lg-down {
			$menu-transition-duration: 0.4s;
	
			padding-left: $menu-button-width;
			max-height: 0;
			transition: max-height $menu-transition-duration ease-out;
			overflow: hidden;
		
			&--is-opened {
				max-height: 1000px;
				transition: max-height $menu-transition-duration ease-in;
			}
		}

		@include media-xs-down {
			padding-left: $menu-button-width-xs;
		}
	}

	&_item {
		&:not(:last-of-type) {
			border-bottom: 1px solid $menu-link-bgcolor-mobile;
		}

		@include media-lg-up {
			&:not(:first-of-type) {
				margin-left: calc(var(--linkSpacing, #{$menu-item-spacing}) / 2);
			}
			&:not(:last-of-type) {
				border-bottom: 0;
				margin-right: calc(var(--linkSpacing, #{$menu-item-spacing}) / 2);
			}
		}
	}

	&_link {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		font-size: 14px;
		text-decoration: none;
		transition: color 0.3s ease;
		cursor: pointer;
		background: inherit;
		border: none;
		width: 100%;

		@include media-lg-up {
			justify-content: center;
			font-size: 15px;
			white-space: nowrap;
			color: var(--textColor, $menu-link-color);

			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				display: block;
				height: $menu-link-border-height;
				z-index: 1;
				background-color: transparent;
				transition: background-color 0.3s ease;
			}

			&:hover, &:focus {
				color: $menu-link-color-selected;
			}

			&--selected {
				color: var(--textActiveColor, $menu-link-color-selected);
	
				&:after {
					background-color: $menu-link-border-color-selected;
				}
			}
		}

		@include media-lg-down {
			padding: 13px 0;
			color: $menu-link-color-mobile;
			opacity: 0.7;
			transition: opacity 0.2s ease;

			&:focus, &:hover {
				opacity: 1;
			}
		}
	}

	&_productThumbnail {
		display: none;

		@include media-lg-down {
			display: block;
			height: 100%;
			width: 40px;
			border-radius: 5px;
			overflow: hidden;
		}
	}

	&_btnMenu {
		$button-icon-height: 8px;
		$button-animation-duration: 0.3s;

		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: $menu-button-width;
		height: 100%;

		.button_item {
			display: flex;
			flex-direction: column-reverse;
			justify-content: center;
			width: 80%;
			height: 80%;
			padding: 0;
			color: $menu-button-color;
			background-color: transparent;
			border: 0;

			&:hover, &:focus {
				box-shadow: none;

				.button_text {
					background: none;
				}
			}
		}

		.button_text {
			margin-top: 8px;
			padding: 0;
			opacity: 1;
			transition: opacity $button-animation-duration ease;
			text-transform: uppercase;
			font-size: 10px;
			line-height: 1;
			transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
		}

		svg {
			height: $button-icon-height;
			width: auto;
			transform: rotate(180deg);
			fill: $menu-button-color;
			transition: transform $button-animation-duration ease;
		}

		&--is-opened {
			.button_text {
				height: 0;
				margin: 0;
				opacity: 0;
			}

			svg {
				transform: none;
			}
		}

		@include media-xs-down {
			width: $menu-button-width-xs;
		}
	}

	&_btnContainer {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		justify-content: flex-end;
	}
}

:export {
	topNavMinHeight: $menu-top-nav-min-height-mobile
}