/* === Основная анимация для сворачивания === */
#sidebar {
    width: 20%;
    transition: none;
}

#sidebar.min {
    width: 5%;
    animation: sidebar-min 0.5s forwards;
}

#sidebar.max {
    width: 20%;
    animation: sidebar-min 0.5s reverse;
}

@keyframes sidebar-min {
    0% {
        width: 20%;
    }

    100% {
        width: 5%;
    }
}

#open-hide-sidebar-btn.min {
    rotate: 180deg;
    animation: button-min 0.5s forwards;
    margin-left: auto;
    margin-right: auto;
}

#open-hide-sidebar-btn.max {
    rotate: 0deg;
    animation: button-min 0.5s reverse;
}

@keyframes button-min {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 180deg;
    }
}

#user-img.min {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

#sidebar-name-container.none {
    opacity: 0;
    display: none;
    animation: name-none 0.5s forwards;
}

#sidebar-name-container.visible {
    opacity: 1;
    display: block;
    animation: name-none 0.5s reverse;
}

@keyframes name-none {
    0% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 0;
        display: block;
    }
}

/* --- Текст --- */
.sidebar-button p {
    display: inline-block;
    transform-origin: left;
    transition: transform 0.5s, opacity 0.5s;
    margin-top: auto;
    margin-bottom: auto;
    transform: scaleX(1);
    opacity: 1;
}

.sidebar-button.none p {
    transform: scaleX(0);
    opacity: 0;
    display: none;
    animation: text-none 0.5s forwards;
}

@keyframes text-none {
    0% {
        opacity: 1;
        display: block;
    }

    99% {
        display: block;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

/* --- Иконка --- */
.sidebar-button img {
    display: block;
    transition: transform 0.5s, width 0.5s;
    width: 20px;
}

.sidebar-button.none img {
    width: 50%;
    margin: 0 auto;
    transform: scale(0.8);
    animation: img-none 0.5s forwards;
}

.sidebar-button.visible img {
    width: 20px;
    transform: scale(1);
}

@keyframes img-none {
    0% {
        width: 20px;
        margin: 0;
    }

    50% {
        width: 20%;
    }

    70% {
        width: 40%;
    }

    99% {
        margin: 0;
    }

    100% {
        width: 50%;
        margin: 0 auto;
    }
}