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

.np-info {
  height: 16px;
  line-height: 1;
  vertical-align: middle;
  color: var(--color-interactive-primary);

  button,
  [data-toggle="popover"]:not(.btn) {
    .ring-offset-0();

    height: 16px;
    overflow: hidden;
    display: inline-block;
  }

  &__large {
    height: 24px;

    button,
    [data-toggle="popover"]:not(.btn) {
      height: 24px;
      display: inline-block;
    }
  }

  .tw-icon {
    cursor: pointer;
    color: var(--color-interactive-primary);
    display: inline-block;
  }

  [data-toggle="popover"]:not(.btn) {
    // Bootstrap popover has !important dotted border bottom
    // This doesn't make sense on a help icon
    border-bottom: none !important;

    &:focus {
      outline: revert;
    }
  }
}
