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

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

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

	&--dark {
		background: $black;

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

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

		.Vlt-sidemenu {
			&__link,
			&__trigger {
				color: $white;

				&:hover {
					background: rgba($grey-darker, 0.5);
				}

				&_active:not(.Vlt-sidemenu__trigger_active) {
					background: $white;
					color: $black;
					font-weight: 600;

					svg {
						fill: $black;
					}
				}

				svg {
					fill: $white;
				}

				&--disabled {
					color: $grey-darker;

					svg {
						fill: $grey-darker;
					}
				}
			}

			&__trigger {
				+ ul {
					border-left: 1px solid $grey-darker;
				}

				span:last-of-type:not(.Vlt-badge) {
					&:after {
						$fill-color: encode-hex-code($grey-darker);
						background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%20fill%3D%22#{$fill-color}%22%2F%3E%0A%3C%2Fsvg%3E');
						background-position: center center;
						background-repeat: no-repeat;
						background-size: contain;
					}
				}

				&:hover {
					span:last-of-type:not(.Vlt-badge) {
						&:after {
							$fill-color: encode-hex-code($white);
							background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%20fill%3D%22#{$fill-color}%22%2F%3E%0A%3C%2Fsvg%3E');
						}
					}
				}

				&_current {
					&:not(.Vlt-sidemenu__trigger_active) {
						background: $grey-darker;
					}

					span:last-of-type:not(.Vlt-badge) {
						&:after {
							$fill-color: encode-hex-code($white);
							background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%20fill%3D%22#{$fill-color}%22%2F%3E%0A%3C%2Fsvg%3E');
						}
					}
				}
			}

			&__title {
				color: $grey-dark;

				&--border {
					border-top: 1px solid $grey-darker;
				}
			}
		}

		.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: $grey !important;
				}

				&:hover {
					&:after {
						background: $grey;
					}

					svg {
						fill: $white !important;
					}
				}

				&_active,
				&:active {
					&:after {
						background: $white;
					}

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

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

			&--logo {
				.Vlt-sidenav__collapse {
					svg {
						fill: $grey;
					}
				}
			}
		}

		&.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: $white !important;
							}
						}
					}
				}
			}
		}

		.Vlt-sidenav__scroll {
			background-image: linear-gradient(to bottom, rgba($white, 0.15) 0%, transparent 4px), //top
				linear-gradient(to bottom, transparent calc(100% - 4px), rgba($white, 0.15) 100%); //bottom

			.Vlt-sidemenu {
				background: linear-gradient(0deg, $black 10px, transparent 10px), // top
					linear-gradient(0deg, transparent calc(100% - 10px), $black calc(100% - 10px)) 100% 0; // bottom
			}
		}
	}
}