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

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

.input-box {
  margin-left: -1rem;

  .d-none {
    display: none;
  }

  i {

    top: 10px;
    left: 1rem;

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

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

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

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

  .selector-button {
    top: -36px;
    right: -165px;
  }

  .selected-items-counter {
    background: blue;
    color: white;
    border-radius: 200px;
    padding: 10px;
    display: inline-block;
    line-height: 10px;
    position: relative;
    top: 33px;
    left: 136px;
  }


  input {

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


    padding: 10px 40px;

    width: 210px;
    height: 42px;

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


    .is-disabled & {
      border-color: #525668;
    }
  }

  .dropdown {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    position: relative;
    display: block;
    z-index: 10;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    top: -28px;
    border-left: 1px solid #8D91A4;
    border-bottom: 1px solid #8D91A4;
    border-right: 1px solid #8D91A4;

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

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

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