@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./mixins/_logical-properties.less";

// Used only by Angular tw-select component
// http://transferwise.github.io/styleguide-components/index.html#select
// React Select uses Select.less (`.np-select`) in components package
.tw-select {
  .tw-icon {
    display: inline-block;
    .margin(right, var(--size-8));

    margin-top: -2px;
    vertical-align: middle;
  }

  .tw-dropdown-item {
    &--clickable {
      cursor: pointer;
    }

    &--divider {
      border-bottom-style: solid;
      border-bottom-width: 1px;
      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
      border-bottom-color: var(--color-border-neutral);
    }

    &--focused {
      background-color: var(--color-background-neutral);
    }

    .currency-flag {
      .margin(right, var(--size-8));
    }

    > a {
      white-space: normal;
    }
  }

  .dropdown-toggle.btn-input {
    &.btn-sm {
      .padding(right, var(--size-32));
    }

    &.btn-md {
      .padding(right, var(--size-40));
    }

    &.btn-lg {
      .padding(right, var(--size-48));
    }
  }

  // tw-chevron-down-icon - Angular component
  .dropdown-toggle tw-chevron-down-icon > span { // stylelint-disable-line selector-type-no-unknown
    .margin-shorthand(0);
  }

  // tw-icon - Angular component
  .dropdown-toggle tw-icon span.tw-icon { // stylelint-disable-line selector-type-no-unknown
    position: static;
    display: inline-block;
  }

  .circle .tw-icon {
    vertical-align: middle;
  }
}

// open options in custom bottom sheet on mobile screens
@media (--screen-xs-max) {
  .tw-select.dropdown-menu.dropdown-menu--open {
    max-height: 50vh;
    max-height: 50svh;
    max-width: 100%;
    opacity: 1;
    overflow: auto;
    position: static;
    transform: none;
    visibility: visible;
    width: 100% !important;
  }
}

.tw-select-filter {
  border: 0;
}