src/components/Roles/Roles.scss
.roles{
    padding: .2rem .5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden scroll;
    &__heading{
        color: #8e9297;
        margin-top: 2rem;
        margin-left: 1.2rem;
        margin-bottom: .5rem;
        &-h2{
            font-size: 1.5rem;
        }
    }
    &__box{
        display: flex;
        align-items: center;
        padding: .6rem 1rem;
        cursor: pointer;
    }
    &__content{
        margin-left: 1rem;
        &-name{
            flex:1;
        }
        &--admin{
            color:rgb(231, 76, 60);
        }
        &-status{
            color:#8e9297;
            font-size: 1.2rem;
        }
    }
    &::-webkit-scrollbar {
        width: 10px;
      }
    &::-webkit-scrollbar-track {
        background: #2e3338;
        background-clip: content-box;
        }
    &::-webkit-scrollbar-thumb {
        background: #202225;
        height:1rem;
        } 
}
.rolescategory{
    display: flex;
    flex-direction: column;
}
.myroles{
    &__user{
        position: relative;
    }
}
.roleprofile{
    display: flex;
    flex-direction: column;
    background-color: #202225;
    border-radius: .5rem;
    outline: none;
    font-family: 'UniSansRegular';
    position: absolute;
    top:0;
    z-index: 100;
    left:-120%;
    animation: moveleftoright .3s;
    &__header{
        padding: 2rem 6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #202225;
        color:#fff;
        border-radius: 4px;
        font-family: inherit;
        &-username{
            font-size: 1.6rem;
            margin-top: 1rem;
        }
        &-status{
            color:#b9bbbe;
            font-size: 1.2rem;
        }
    }
    &__content{
        padding: 2rem;
        font-family: Whitney-bold;
        background-color: #2f3136;
        display: flex;
        flex-direction: column;
        width:25rem;
        &-heading{
            color:#b9bbbe;
            font-size: 1.2rem;
            margin-bottom: 1.25rem;
        }
        &-roles{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
}
.chip{
    display: flex;
    height:2.2rem;
    align-items: center;
    border:1px solid red;
    border-radius: 1.1rem;
    padding: .4rem;
    margin: 0 .4rem .4rem 0;
    font-family: 'UniSansRegular';
    
    &__avatar{
        height: 1.2rem;
        width: 1.2rem;
        margin-right: .4rem;
        display: flex;
        justify-content: center;
    }
    &__label{
        font-size: 1.2rem;
        color:hsla(0,0%,100%,.9);
        // color:#FFF;
        max-width: 20rem;
        overflow: hidden;
        margin-right: .4rem;
        letter-spacing: .02rem;
    }
}
@keyframes moveleftoright {
    0%{
        transform: translateX(-5%);
    }
    100%{
        transform: translateX(0%);
    }
}