//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

$sidenav-selected-background: rgba($white, 0.1);
$sidenav-icons-default-color: #00fff4;
$sidenav-text-color: $white;
$sidenav-titles-color: rgba($aqua-lighter, 0.8);

.Vlt-sidenav {
	&__mobile--aqua {
		background: $aqua-dark;

		button {
			svg {
				fill: $white;
			}
		}
	}

	&--aqua {
		background: linear-gradient(to bottom, #035879, #0085a8);

		hr {
			border-top: 1px solid rgba($sidenav-text-color, 0.1);
		}

		.Vlt-sidenav {
			&__link {
				&:hover {
					background: rgba($sidenav-text-color, 0.05);
				}
			}
		}

		.Vlt-sidenav__scroll {
			.Vlt-sidemenu {
				background: linear-gradient(to bottom, lighten(#035879, 1) 10px, transparent 10px), linear-gradient(0deg, transparent calc(100% - 10px), #0085a8 calc(100% - 10px), #0085a8 100%);
			}
		}

		.Vlt-sidemenu {

			&__link,
			&__trigger {
				color: $sidenav-text-color;

				&:hover {
					background: rgba($white, 0.05);
				}

				svg {
					fill: $sidenav-icons-default-color;
				}
			}

			&__link {
				&_active {
					background: $sidenav-selected-background;

					svg {
						fill: $white !important;
					}

					&:hover {
						background: $aqua-dark;
					}
				}
			}

			&__trigger {
				&:after {
					background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2013.524L4.692%208.136a.667.667%200%201%201%20.951-.937L10%2011.62l4.357-4.422a.668.668%200%200%201%20.95.937L10%2013.524z%22%20opacity%3D%22.4%22%2F%3E%0A%3C%2Fsvg%3E%0A');
					background-position: center center;
					background-repeat: no-repeat;
					background-size: contain;
				}

				&_current {
					&:not(.Vlt-sidemenu__trigger_active) {
						background: rgba($white, 0.05);
					}
				}
			}

			&__title {
				color: $sidenav-titles-color;

				&--border {
					border-top: 1px solid rgba($aqua-light, 0.2);
				}
			}
		}

		.Vlt-sidetabs {

			&--bottom {
				border-top: 1px solid rgba($white, 0.1);
			}

			&--top {
				border-bottom: 1px solid rgba($white, 0.1);
			}

			.Vlt-js-tabs__link {

				svg {
					fill: rgba($sidenav-icons-default-color, 0.8) !important;
				}

				&:hover {
					&:after {
						background: rgba($sidenav-icons-default-color, 0.4);
					}

					svg {
						fill: $white !important;
					}
				}

				&_active,
				&:active {
					&:after {
						background: rgba($sidenav-icons-default-color, 0.8);
					}

					svg {
						fill: $white !important;
					}
				}
			}
		}

		.Vlt-sidenav__block {
			&:before,
			&:after {
				background: rgba($white, 0.1);
			}

			&--logo {
				&:after {
					display: block;
				}

				.Vlt-sidenav__collapse {
					svg {
						fill: $sidenav-icons-default-color;
					}
				}
			}
		}

		&.Vlt-sidenav--collapsed {
			@media #{$M-plus} {
				.Vlt-sidemenu__title {
					border-bottom: 1px solid rgba($white, 0.1);
				}

				li {
					li {
						.Vlt-sidemenu__link_active {
							svg {
								fill: $grey-dark !important;
							}
						}
					}
				}

				.Vlt-sidemenu__trigger_active {
					background: $aqua-dark;
				}
			}
		}
	}
}