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

:host {

  .input-box {
    width: 218px;

    .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: -60px;
      left: 188px;
      width: 20px;
    }

    .selected-items-counter {
      visibility: hidden;

      background: variables.$csc-chips-bg-color;
      color: white;
      border-radius: 200px;
      padding: 10px;
      display: inline-block;
      line-height: 10px;
      position: relative;
      z-index: 11;
      height: 30px;
      top: -36px;
      right: 65px;


      &.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;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      width: 218px;
      top: -57px;
      left: 0;
      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;
        }
      }
    }
  }

}