@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import './skins/color-1.css';

/**
*   Aside style configuration
*/
.aside {
    background: var(--bg-black-100); position: fixed; top: 0; left: 0; width: 275px; z-index: 10; height: 100%; padding: 30px;
    display: flex; justify-content: center; align-items: center; border-left: 1px solid var(--bg-black-50); transition: all 0.3s ease;
}
.aside ul {
    list-style: none;
}


.aside .nav-toggler {
    height: 40px; width: 45px; cursor: pointer; border: 1px solid var(--bg-black-50); position: fixed; left: 300px; top: 30px; border-radius: 5px;
    background: var(--bg-black-100); display: none; justify-content: center; align-items: center; transition: all 0.3s ease;
}
.aside .nav-toggler.open span {
    background-color: transparent;
}
.aside .nav-toggler.open span::before {
    transform: rotate(45deg);
    top: 0;
}
.aside .nav-toggler.open span::after {
    transform: rotate(-45deg);
    top: 0;
}
.aside .nav-toggler span {
    height: 2px; width: 18px; display: inline-block; background: var(--skin-color); position: relative;
}
.aside .nav-toggler span::before {
    height: 2px; width: 18px; content: ''; background: var(--skin-color); position: absolute; top: -6px; left: 0;
}
.aside .nav-toggler span::after {
    height: 2px; width: 18px; content: ''; background: var(--skin-color); position: absolute; top: 6px; left: 0;
}


.aside .logo {
    position: absolute; top: 30px; font-size: 30px; text-transform: capitalize;
}
.aside .logo a {
    color: var(--text-black-900); padding: 15px 20px; font-weight: 700; font-size: 35px; letter-spacing: 5px; position: relative;
}
.aside .logo a span {
    font-family: 'Clicker Script', cursive; font-size: 50px;
}
.aside .logo a::before {
    content: ''; width: 20px; height: 20px; position: absolute; border-bottom: 5px solid var(--skin-color); border-left: 5px solid var(--skin-color);
    bottom: 0; left: 0;
}
.aside .logo a::after {
    content: ''; width: 20px; height: 20px; position: absolute; border-top: 5px solid var(--skin-color); border-right: 5px solid var(--skin-color);
    top: 0; right: 0;
}


.aside .nav {
    margin-top: 30px;
}
.aside .nav li {
    margin-top: 20px; display: block;
}
.aside .nav li a {
    display: block; font-size: 16px; font-weight: 600; color: var(--text-black-900); padding: 5px 15px; border-bottom: 1px solid var(--bg-black-50);
}
.aside .nav li a.active {
    color: var(--skin-color);
}
.aside .nav li a i {
    margin-right: 20px;
}