/**
Icon input
 */
@use '../../config' as *;

.input-icon {
  --input-icon-padding-end: #{$input-icon-padding-end};
  --input-icon-padding-start: #{$input-icon-padding-start};
  position: relative;

  .form-control:not(:last-child),
  .form-select:not(:last-child) {
    padding-inline-end: var(--input-icon-padding-end);
  }

  .form-control:not(:first-child),
  .form-select:not(:first-child) {
    padding-inline-start: var(--input-icon-padding-start);
  }
}

.input-icon-addon {
  --input-icon-addon-width: #{$input-icon-addon-width};
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--input-icon-addon-width);
  height: $input-height;
  font-size: 1.2em;
  color: var(--icon-color);
  pointer-events: none;

  &:last-child {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}