/***************************************************************************************************
 *
 * Portal — 
 * Copyright (C) 2020 Fabrice Salvaire
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 **************************************************************************************************/

#left-sidebar {
    // anchor at left between the top navbar and the bottom
    position: fixed;

    top: 0;
    bottom: 0;
    margin-top: $top-navbar-height;

    left: - $left-sidebar-width;
    &.active {
	left: 0;
    }
    transition: left 300ms;

    width: $left-sidebar-width;

    z-index: $zindex-fixed + 10;

    background-color: $sidebar-bg;
    border-right: $sidebar-border;
}

// Fixme: purpose ???
.left-sidebar-wrapper {
    // width: 100%;
    height: 100%;
    // column layout
    display: flex;
    flex-direction: column;
}

/**************************************************************************************************/

.left-sidebar-header {
    padding: $sidebar-padding-y;
}

#close-left-sidebar {
    float: right;
    width: $sidebar-open-button-size;
    background-color: $sidebar-close-bg;

    &:hover {
	background-color: darken($sidebar-close-bg, $sidebar-color-interval);
    }

    svg {
	margin-right: 2px; // center icon
    }
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#left-sidebar-open-wrapper {
    // Fade in the open button
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;

    // place
    z-index: $open-left-sidebar;
    position: relative;
    left: $left-sidebar-width;

    // size a larger background
    // height: $sidebar-open-wrapper-size;
    // width: $sidebar-open-wrapper-size;

    padding-top: $sidebar-open-padding-t;
    padding-left: $sidebar-open-padding-t;

    // shape
    // border-top-left-radius: 0%;
    // border-top-right-radius: 100%;
    // border-bottom-right-radius: 100%;
    // border-bottom-left-radius: 100%;

    // background-color: rgba(#ffffff, .5);
}

#open-left-sidebar {
    // button size
    height: $sidebar-open-size;
    width: $sidebar-open-size;

    // button shape
    border-top-left-radius: 0%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;

    background-color: $gray-800;
    color: $body-bg;

    // icon size
    font-size: $font-size-lg;

    &:hover {
    	background-color: $gray-400;
    }
}

/**************************************************************************************************/

.left-sidebar-footer {
    padding: $sidebar-padding-y;
    // border-top: $sidebar-border;

    p {
	line-height: $font-size-sm;
	font-size: $font-size-sm;
	text-align: right;
    }
}

/**************************************************************************************************/

.left-sidebar-spacer {
    flex-grow: 1; // to expand
    // width: 100%;
    // min-height: 0px; // for perfect scrollbar
    overflow-y: auto; // use browser scrollbar

    // #left-sidebar-scroll {
    // 	width: 100%;
    // 	// for perfect scrollbar
    // 	position: relative;
    // 	height: 100%;
    // 	overflow-y: auto;
    // }
}

/*
.sidebar-elements {
    // Reset ul
    margin: 0;
    padding: 0;
    list-style: none;

    a {
	// reset
	text-decoration: none;
	outline: 0;

	display: block; // for caret

	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
    }

    .menu-icon {
	width: 1rem;
	display: inline-block;
	margin-right: .5rem;
    }

    .divider {
	padding: $sidebar-padding-y 0 0 $sidebar-padding-x;
	color: $sidebar-divider-color;
	text-transform: uppercase;
    }

    > li {
	> a { // Level 0 Menu
	    padding: 0 $sidebar-padding-x;
	    color: $sidebar-menu-color;
	    line-height: $sidebar-menu-line-height;

	    &:hover {
		background-color: $sidebar-menu-hovered;
	    }

	}

	&.active > a {
	    color: $link-color;
	}

	// Sub-menus
	ul {
	    display: none; // sub-menus are closed per default
	    overflow: hidden; // for height transition
	    background-color: $sidebar-submenu-bg;
	    padding: $sidebar-submenu-padding-y 0;

	    li {
		> a {
		    padding: 0 $sidebar-padding-x 0 $sidebar-padding-y;
	    	    color: $sidebar-submenu-color;
		    line-height: $sidebar-submenu-line-height;
		    font-size: 80%;

	    	    &:hover {
	    	    background-color: $sidebar-submenu-hovered;
	    	    }
		}

		&.active > a {
		    color: $link-color;
		}

		ul {
	    	    padding-bottom: 0; // don't accumulate padding at the bottom of the level > 1 sub-menu
		}
	    }
	}

	// add border to level 1 sub-menu
	> ul {
	    border-top: $sidebar-border;
	    border-bottom: $sidebar-border;
	}

	// sub-menu indentation
	> ul > li {
	    > a {
		padding-left: nth($sidebar-level-padding, 1);
	    }
	    > ul > li {
		> a {
		    padding-left: nth($sidebar-level-padding, 2);
		}
		> ul > li {
		    > a {
			padding-left: nth($sidebar-level-padding, 3);
		    }
		    > ul > li {
			> a {
			    padding-left: nth($sidebar-level-padding, 4);
			}
			> ul > li {
			    > a {
				padding-left: nth($sidebar-level-padding, 5);
			    }
			}
		    }
		}
	    }
	}
    }

    // opened sub-menus
    li.open > ul {
	display: block;
    }

    // Style caret for
    li.parent {
	> a:before {
	    float: right;
	    content: $fa-var-caret-down;
	    font-family: "Font Awesome\ 5 Free";
	    font-style: normal;
	    font-weight: 900;
	    color: $sidebar-color;
	}

	&.open > a:before {
	    content: $fa-var-caret-up;
	}
    }
}
*/
