aside {
    display: none;
}

@media (min-width: 541px) {
    aside {
        display: block;
        margin: 0 -30px 0 0;
        padding-top: 30px;
        width: 250px;
        min-width: 250px;
        z-index: 1;
        transition: all 0.3s ease-out;
    }

    aside hr {
        margin: 6px 15px;
    }

    aside i {
        /* stylelint-disable-next-line declaration-no-important */
        color: var(--text-black) !important;
        width: 30px;
        min-width: 30px;
        text-align: center;
        margin: 0 0 0 15px;
        transition: margin 0.3s ease-out;
    }

    aside li {
        list-style: none;
    }

    aside li .nav-row {
        padding: 6px 0;
        width: 100%;
        display: flex;
    }

    aside li.heading {
        font-weight: bold;
        font-variant: all-small-caps;
        font-size: 20px;
    }

    aside .icon-title {
        margin-right: 15px;
    }

    aside .notification-badge {
        margin: 0 6px;
    }

    aside a {
        text-decoration: none;
    }

    aside a .icon-title {
        color: var(--nav-sidebar-text);
    }

    aside a .icon-title:hover {
        color: var(--sidebar-hover-text);
    }

    aside a .icon-title:active {
        color: #790000;
    }

    aside li .selected {
        background-color: var(--selected-nav-sidebar);
    }

    aside a.selected .icon-title {
        color: var(--text-black);
        font-weight: bold;
    }

    aside.collapsed {
        width: 60px;
        min-width: 60px;
    }

    aside.collapsed i {
        padding: 2px 0;
        margin: 0 15px;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    aside.collapsed .icon-title {
        width: 0;
        overflow: hidden;
        min-width: 0;
        white-space: nowrap;
    }

    /* put it on top of the icon */
    aside.collapsed .notification-badge {
        font-size: 12px;
        position: absolute;
        margin: 12px 0 0 32px;
    }

    [data-theme="dark"] aside ul {
        background-color: var(--background-blue);
    }

    /* Reduced z-index when popup is active */
    body.popup-active aside {
        z-index: 0;
    }
}