@import '../variables';

.itf-dropdown {
  display: inline-block;
}


.air-dropdown {
  z-index: 101;
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
  rgba(9, 30, 66, 0.31) 0px 0px 1px;
  width: 100%;

  .dropdownInput {
    padding: 10px 14px 8px;
    width: 100%;
    border: none;
    color: #172b4d;
    background: none;

    &:focus {
      outline: none;
    }
  }

  .options {
    padding: 5px 0;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    // &::-webkit-scrollbar {
    //   width: 7px;
    // }
    // &::-webkit-scrollbar-track {
    //   background: none;
    // }
    // &::-webkit-scrollbar-thumb {
    //   // border-radius: 99px;
    //   background: #d1d1d1;
    // }
  }

  .option {
    padding: 8px 14px;
    word-break: break-word;
    cursor: pointer;

    &.select-option-is-active {
      background: #e8ecee;
    }
  }

  .optionsNoResults {
    padding: 0px 15px 10px;
    color: #8993a4;
  }

}

[data-theme="dark"] .air-dropdown {
  background: $dark-input-focus-border-color;

  .option {
    &.select-option-is-active {
      background: $dark-border-color;
    }
  }
}
