/*
 * EaseMyWay form-field foundation
 *
 * This stylesheet must remain the final local stylesheet in index.html.
 * Module styles may control colors, borders, heights, and typography, but the
 * shared icon gutter below is protected so injected field icons never overlap
 * a control's text, placeholder, selected value, or date content.
 */

:root {
  --emw-field-icon-left: 0.62rem;
  --emw-field-icon-size: 1.36rem;
  --emw-field-icon-text-gap: 0.62rem;
  --emw-field-icon-gutter: calc(
    var(--emw-field-icon-left)
    + var(--emw-field-icon-size)
    + var(--emw-field-icon-text-gap)
  );
}

html body .field-control > .field-icon {
  left: var(--emw-field-icon-left);
  width: var(--emw-field-icon-size);
  min-width: var(--emw-field-icon-size);
  height: var(--emw-field-icon-size);
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

html body .field-control > .field-icon ~ input,
html body .field-control > .field-icon ~ select,
html body .field-control > .field-icon ~ textarea,
html body .field-control > input[data-iconized="true"],
html body .field-control > select[data-iconized="true"],
html body .field-control > textarea[data-iconized="true"] {
  padding-left: var(--emw-field-icon-gutter) !important;
  box-sizing: border-box;
}

html[dir="rtl"] body .field-control > .field-icon {
  right: var(--emw-field-icon-left);
  left: auto;
}

html[dir="rtl"] body .field-control > .field-icon ~ input,
html[dir="rtl"] body .field-control > .field-icon ~ select,
html[dir="rtl"] body .field-control > .field-icon ~ textarea,
html[dir="rtl"] body .field-control > input[data-iconized="true"],
html[dir="rtl"] body .field-control > select[data-iconized="true"],
html[dir="rtl"] body .field-control > textarea[data-iconized="true"] {
  padding-right: var(--emw-field-icon-gutter) !important;
  padding-left: 0.75rem !important;
}