Form field suffix and prefix position could not be hard-coded to 0.

[squidjam]

I have encountered no real way to affect the position of the icons in input elements such as datalist, password, time, select, etc.

I noticed this instructions on input.element.scss:

.prefix {
  left: 0;
}

.suffix {
  right: 0;
}

.rtl {
  .prefix {
    left: initial;
    right: 0;
  }

  .suffix {
    right: initial;
    left: 0;
  }

  ::slotted([slot='input']) {
    text-align: right;
  }
}

Which generates an issue when you want to add borders to your form elements.

So why not add a variable there?

.prefix {
  left: var(--prefix-distance, 0);
}

.suffix {
  right: var(--suffix-distance, 0);
}

.rtl {
  .prefix {
    left: initial;
    right: var(--prefix-distance, 0);
  }

  .suffix {
    right: initial;
    left: var(--suffix-distance, 0);
  }

  ::slotted([slot='input']) {
    text-align: right;
  }
}

Defaults to 0, so no breaks in layout for those who don't use it, but a huge help for those of us who would need it.

I submit this idea for comments.