@import (reference) "./../../../styles/less/ring.less";

.np-select-input-addon-container {
  pointer-events: none;
  margin-inline-start: var(--size-4);
  display: inline-flex;
  align-items: center;

  & > :not([hidden]) ~ :not([hidden]) {
    margin-inline-start: var(--size-4);
  }
}

.np-select-input-addon {
  border-width: 0;
  background: none;
  display: inline-flex;
  height: var(--size-24);
  width: var(--size-24);
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */

  &--interactive {
    pointer-events: auto;
    color: var(--color-interactive-secondary);

    &:hover {
      color: var(--color-interactive-secondary-hover);
    }

    .focus-ring();
  }
}

.np-select-input-addon-separator {
  height: var(--size-24);
  border-inline-start: 1px solid var(--color-border-neutral);
}