ng-implementation/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss

@use '../../src/styles/variables';

:host {

  .input-box {
    width: 218px;
    color: #1b1d27;

    .d-none {
      display: none;
    }

    i {

      top: 10px;
      left: 1rem;

      &::before {
        left: 10px;
        top: 10px;
      }

      &.is-disabled {
        color: #8d91a4;
        fill: #8d91a4;
      }
    }

    .search-placeholder,
    .selector-button {
      position: relative;
    }

    .search-placeholder {
      top: 30px;
      left: 16px;
    }

    .selector-button {

      top: -52px;
      left: 188px;
      width: 20px;
    }

    .selected-items-counter {
      visibility: hidden;

      background: variables.$csc-chips-bg-color;
      color: white;
      border-radius: 200px;

      display: inline-block;
      line-height: 10px;
      position: relative;
      z-index: 11;

      top: -32px;
      right: -163px;
      font-size: 14px;
      padding: 5px 7px;
      min-width: 2.5ch;


      &.is-visible {
        visibility: visible;
      }
    }


    input {

      border-radius: 8px;
      border: 1px solid #8D91A4;
      background: var(--color-background-card-on-base, #FFF);

      padding: 10px 40px;

      width: 100%;
      height: 42px;

      overflow: hidden;
      color: var(--color-text-secondary, #525668);
      text-overflow: ellipsis;
      font-size: var(--Font-Base, 14px);


      .is-disabled & {
        border-color: #8D91A4;
        background: #fff;
        color: #8D91A4;

        i {
          color: #525668;
        }
      }
    }

    .dropdown {
      background: white;
      padding: 1rem;
      border-radius: 8px;
      position: relative;
      display: block;
      z-index: 100;
      width: 218px;
      top: -24px;
      left: 0;
      border: 1px solid #8D91A4;
      box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);

color: var(--color-text-base, #1B1D27);
 
text-overflow: ellipsis;

/* Text/text-base */
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */


      
      .dropdown-list {
        max-height: 200px;
        overflow-y: auto;
      }

      .dropdown-item {
        padding: 4px;
        cursor: pointer;

        &:hover {
          background: #525668;
          color: white;
        }
      }
    }
  }

  .separator{
    display: flex;
width: 186px;
height: 34px;
min-height: 34px;
max-height: 34px;
padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
align-items: center;
gap: var(--Spacing-Spacing-10, 4px);
border-radius: var(--Radius-list, 0);
background: #F5F5F5;

.label{
  overflow: hidden;
color: var(--color-text-secondary, #525668);
leading-trim: both;
text-edge: cap;
text-overflow: ellipsis;
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: italic;
font-weight: 400;
line-height: 100%; /* 14px */
}
  }
}