.sidebar {
    background-color: $dark;
    min-height: 100vh;
    font-size: 15px;
    line-height: 28px;
}

.sidebar-header {
    color: $white;
    position: relative;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    &:hover .actions {
        visibility: visible;
    }
}

.sidebar .actions {
    position: absolute;
    top: 0px;
    right: 8px;
    background-color: $dark;
    visibility: hidden;
}
.sidebar .sidebar-header .actions {
    background-color: $dark;
}
.sidebar .sidebar-item .actions {
    background-color: $white;
}

.sidebar .sidebar-item.active .actions {
    background-color: $primary;
}
.sidebar .sidebar-header .actions a,
.sidebar .sidebar-header .actions span {
    color: $white !important;
    cursor: pointer;
}

.sidebar .sidebar-item .actions a {
    color: $dark !important;
    cursor: pointer;
}

.sidebar .sidebar-item.active .actions a {
    color: $white !important;
    cursor: pointer;
}

.sidebar-item {
    a {
        color: $white;
        text-decoration: none;
        padding: 0 0px;
    }
    &:hover {
        background-color: $light;
        a {
            color: $dark;
        }
    }
    position: relative;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: $white;
    &:hover .actions {
        visibility: visible;
    }

    
}

.sidebar hr {
    color: $white;
    line-height: 30px;
}

.sidebar .active {
    background-color: $primary;
    a {
        color: $white;
    }
}