/* USER ROLE */
%userPopoutRoles,
.roleWrapper-2IhvNd {
  %role {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    border-radius: 3px;
    transition: all 0.1s ease-in-out;
    background: transparent;
    cursor: default;
    &[style] {
      &:not(:hover) {
        border-color: transparent !important;
      }
    }
    &:not([style]) {
      background: hsla(0, 0%, 100%, 0.1);
      border-color: transparent;
    }
    
    >%roleName {
      margin-right: 0;
      margin-left: 4px;
      color: hsla(0, 0%, 100%, 0.9);
      transition: all 0.1s ease-in-out;
    }
    &:hover {
      %roleCircle {
        &:before {
          opacity: 0.3;
        }
      }
      >%roleName {
        color: #fff;
      }
    }
  }
  %roleRemoveButton {
    position: static;
  }
  %roleRemoveIcon > path {
    margin-left: 2px;
    fill: #fff;
  }
  %roleRemoveIcon {
    left: calc(100% - 7px);
  }
  %roleCircle {
    width: 0;
    height: 0;
    &:not(:empty) {
      margin-left: 6px;
    }
    &:before {
      content: '';
      border-radius: 3px;
      position: absolute;
      @include pos(-1px, -1px, -1px, -1px);
      background: inherit;
      opacity: 0.2;
      transition: all 0.1s ease-in-out;
      pointer-events: none;
    }
  }
  %roleAddButton {
    background: hsla(0, 0%, 100%, 0.1);
    transition: all 0.1s ease-in-out;
    cursor: pointer;
    >svg {
      width: 7px;
      height: 7px;
      color: hsla(0, 0%, 100%, 0.5);
      transition: inherit;
    }
    &:hover {
      background: hsla(0, 0%, 100%, 0.2);
      >svg {
        color: #fff;
      }
    }
  }
}
%autocompletePopoutRow {
  &%autocompletePopoutSelected {
    .rowInner-3uonq8 {
      background-color: transparent;
    }
  }
  &:hover {
    .rowInner-3uonq8 {
      background-color: transparent;
    }
  }
}
/*assign roles popout*/
.container-2kTWmC {
  background-color: hsla(0, 0%, 0%, 0.8);
  border: none;
}