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

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

  .d-none {
    display: none;
  }

  i {

    top: 10px;
    left: 1rem;

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

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

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

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

  .selector-button {
    top: -30px;
    right: -177px;
  }


  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);


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

  .dropdown {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    position: relative;
    display: block;

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

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