.mk-role {
    height: var(--pill-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: calc(var(--pill-h)/2);
    cursor: pointer;
    gap: 4px;
}

.role-left {
    background-color: var(--text-color);
    color: var(--gray-bg);
    height: 100%;
    width: var(--pill-h);
    border-radius: calc(var(--pill-h)/2) 0 0 calc(var(--pill-h)/2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-main {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gray-bg);
    border-radius: 0 calc(var(--pill-h)/2) calc(var(--pill-h)/2) 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
    padding: 0 0 0 var(--pill-gap);
}

.role-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mk-role-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--pill-gap);
}

.form-role-section{
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
}

    .form-role-section > legend{
        margin-bottom: var(--pill-gap);
    }

.form-role-check {
    display: flex;
    gap: var(--pill-gap);
    align-items: flex-start;
}

.form-role-check > input {
    margin: 0;
}

.form-role-check-text {
    display: flex;
    flex-direction: column;
}

.form-role-check-text > label {
    font-weight: 400; /* normal text */
    margin-top: 0;
}

.form-role-check-desc {
    font-size: 0.85em;
    color: var(--text-color);
    opacity: 0.80;
    margin-top: var(--small-gap);
}

.icon-num-roles, .icon-edit {
    width: calc(var(--pill-h) - 8px);
    height: calc(var(--pill-h) - 8px);
    border-radius: 50%;
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-num-roles {
    background-color: var(--dark-gray-bg);
}

.icon-edit {
    background-color: var(--white-bg);
    display:none
}

    .icon-edit:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
    }

.mk-role:hover > .role-left {
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
}

.mk-role:hover > .role-main {
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
}

.mk-role:hover  .icon-edit {
    display: flex;
}