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

.input-icon {
  --input-icon-padding-end: #{$input-icon-padding-end};
  --input-icon-padding-start: #{$input-icon-padding-start};
  --input-icon-addon-height: #{input-height-token()};
  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);
  }

  &:has(> .form-control-sm, > .form-select-sm) {
    --input-icon-addon-height: #{input-height-token('sm')};
  }

  &:has(> .form-control-lg, > .form-select-lg) {
    --input-icon-addon-height: #{input-height-token('lg')};
  }
}

.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: var(--input-icon-addon-height, #{input-height-token()});
  font-size: 1.2em;
  color: var(--icon-color);
  pointer-events: none;

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