// Input addon
.with-addon {
  position: relative;

  .addon, .addon-end {
    position: absolute;
    margin: 0;
    align-items: center;
    display: flex;
    padding: 0 $input-padding-x;
    pointer-events: none;
    height: 100%;
    z-index: 10;
  }

  /* align icon */
  &.addon-start .addon { left:  0; }
  &.addon-end .addon-end { right: 0; }

  /* add padding  */
  &.addon-start .addon + * { padding-left: 2.5rem; }
  &.addon-end .addon-end + * { padding-right: 2.5rem; }
}
