/* USER ROLE */
%role {
  position: relative;
  flex-direction: row-reverse;
  border-radius: 3px;
  transition: all 0.1s ease-in-out;
  background-color: transparent;
  border-color: transparent;
  cursor: default;

  %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;
      }
    }
  }
}
%roleRemoveButton {
  position: static;
}
%roleRemoveIcon > path {
  margin-left: 2px;
  fill: #fff;
}
%roleRemoveIcon {
  left: calc(100% - 7px);
}
%roleCircle {
  %role & {
    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;
    }
  }
}
/*assign roles popout*/
%roleAssignPopout {
  background-color: hsla(0, 0%, 0%, 0.8);
  border: none;
}
