@use '../../abstracts/variables' as *;
@use '../../base/typography' as *;

.sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 320px;
    height: 100%;
    border-right: 1px solid $color-border;
    background-color: $gray-100;

    &-menu {
        padding: 0.75rem;
        width: 100%;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        gap: 1rem;  
        overflow-y: auto;
        
        &-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            &__header {
                font-size: .75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: $color-text-muted;
            }

            &__list {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;

                &-item {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem;

                    font-size: 0.875rem;
                    font-weight: 600;
                    letter-spacing: .25px;
                    color: $color-text-muted;

                    border-radius: 4px;

                    &-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        padding: 0.45rem;

                        width: 2rem;
                        height: 2rem;

                        color: $gray-600;

                        background-color: $gray-300;
                        border-radius: 50%;
                    }

                    &:hover {
                        &:not(.active) {
                            background-color: $color-bg-element-hover;
                        }
                        text-decoration: none !important;
                    }

                    &.active {
                        color: $white;
                        background-color: $color-main;
                    }

                    &.active &-icon {
                        color: $color-main;
                        background-color: $white;
                    }
                }
            }
        }
    }

    &-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.75rem;
        align-self: flex-end;
        border-top: 1px solid $color-border;

        & .button {
            width: 100%;
            font-size: .875rem;
            padding: 0.5rem;
        }
    }
}