@include export-module('co-role-email-selector-layout') {
 .co-role-email-selector {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   row-gap: 0;
   justify-content: space-between;
   position: relative;
   .chips-wrapper {
     display: flex;
     flex-wrap: wrap;
     column-gap: $cc-co-role-email-selector-chips-column-gap;
     row-gap: $cc-co-role-email-selector-chips-row-gap;
     padding: $cc-co-role-email-selector-chips-padding;
     position: absolute;
     left: 10px;
     top: 8px;
     max-width: 50%;
     max-height: 30px;
     overflow: auto;
     .chips {
       font-family: $cc-co-role-email-selector-chip-font-family;
       font-size: $cc-co-role-email-selector-chip-font-size;
       color: $cc-co-role-email-selector-chip-font-color;
       display: flex;
       align-items: center;
       background: $cc-co-role-email-selector-chip-background-color;
       border-radius: $cc-co-role-email-selector-chip-border-radius; // 5px;
       padding: $cc-co-role-email-selector-chip-padding; // 5px 7px;
       user-select: none;
       &:last-child {
         margin-right: 20px;
       }
     }
     .remove-chip-icon {
       cursor: pointer;
       padding: 5px;
       height: $cc-co-role-email-selector-chip-delete-icon-size;
       width: $cc-co-role-email-selector-chip-delete-icon-size;
       svg { // for fontawesome icons
         fill: $cc-co-role-email-selector-chip-delete-icon-color;
       }
       & [fill] { // for own icons
         fill: $cc-co-role-email-selector-chip-delete-icon-color;
       }
     }
   }
 }
}