aside {
    padding: 1rem 1rem 1rem 0;

    background: var(--bg-main-color);
    box-shadow: var(--box-shadow-aside);

    overflow: auto;
}

.aside__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: .5rem .5rem 0 1rem;
    margin-bottom: 1rem;
}

.aside__title {
    display: flex;
    align-items: center;
    gap: .5rem;

    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;

    a {
        text-decoration: none;
    }

    .station-connection {
        padding: 0 .25rem;

        font-size: .8rem;
        user-select: none;

        border: 1px solid;
        border-radius: .4rem;

        &.station-connection_pending {
            color: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 8px -3px var(--primary-color);
            animation: pending 1.7s linear infinite;
        }

        &.station-connection_authorized {
            color: var(--success-color);
            border-color: var(--success-color);
            box-shadow: 0 0 8px -3px var(--success-color);
        }

        &.station-connection_unauthorized {
            color: var(--failure-color);
            border-color: var(--failure-color);
            box-shadow: 0 0 8px -3px var(--failure-color);
        }
    }
}

@keyframes pending {
    from {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
    to {
        opacity: 1;
    }
}

.aside__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: .2rem;

    background: none;
    border: none;
    border-radius: .25rem;

    cursor: pointer;
    transition: .3s background;

    &:hover {
        background: rgba(200 200 200 / .3);
    }

    &:active {
        background: rgba(150 150 150 / .35);
    }
}

.aside__add-btn__white {
    svg path {
        color: #fff;
    }

    &:hover {
        background: rgba(215 215 215 / .3);
    }

    &:active {
        background: rgba(255 255 255 / .35);
    }
}

.aside__expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-right: .5rem;

    background: none;
    border: none;
    cursor: pointer;

    transform: rotate(-90deg) translate(20%, -20%);
    transition: .3s all;
}

.aside__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .25rem;
}

.aside__item {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .25rem;

    padding-left: 1rem;

    width: 100%;

    &:has(.aside__list) {
        & > .aside__list .aside__item {
            &::before {
                content: '';
                position: absolute;
                left: .5rem;
                top: -.25rem;
                z-index: 0;

                height: 110%;
                width: 2px;

                background: var(--border-color);
            }

            &:last-child::before {
                height: 1.5rem;
            }

            &::after {
                content: '';
                position: absolute;
                left: .5rem;
                top: 1.25rem;
                transform: translateY(-50%);

                width: .5rem;
                height: 2px;

                background: var(--border-color);
            }
        }
    }

    .aside__item-actions {
        display: flex;
        align-items: center;

        padding: .2rem .5rem;
        border-radius: .5rem;

        background: var(--bg-list-item-color);

        transition: .3s background;
        &:hover {
            background: rgba(150 150 150 / .3);
        }

        &:not(:has(.aside__expand-btn)) {
            padding-left: 1rem;
        }

        &.active {
            .aside__item-btn {
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .aside__expand-btn {
                transform: rotate(0) translate(0, 0);
            }
        }
    }

    .aside__item-actions:not(.active) + .aside__list {
        display: none;
    }

    .aside__item-actions.selected {
        background: var(--primary-color-a80);
    }

    .aside__item-btn {
        width: 100%;
        height: 100%;
        padding-block: .5rem;

        background: none;
        border: none;

        text-align: left;
        font-size: .95rem;
        text-decoration: none;

        cursor: pointer;
    }
}