@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";

.np-select-option {
  border-radius: var(--radius-small);
  padding: var(--size-16);

  &-placeholder {
    background-color: var(--color-background-neutral);

    &:not(.disabled):hover {
      background-color: var(--color-background-neutral-hover);
    }
  
    &:not(.disabled):focus,
    &:not(.disabled):active {
      background-color: var(--color-background-neutral-active);
    }
  }

  &-selected {
    border: 1px solid var(--color-interactive-secondary);
  }

  &-list {
    max-height: 350px;
    overflow-y: auto;

    & > .np-section {
      // remove large margin in Section & Header
      margin-top: 0;
    }
  }

  .has-error * & {
    .ring-negative();
    .ring-inset();
    .ring();
    .focus-ring();
  }
}
