@import url("../tools/selectors.form.css");

/* Grid */

.s-affixed-input-wrapper:where(:not(
  .checkboxinput, .has-type-check
  .radio, .has-type-radio
  .select, .has-type-select
  .checkboxselectmultiple, .has-select
  .textarea, .has-textarea
)) {
  display: grid;
}

/* Grid: Cells */

.s-affixed-input-wrapper label { grid-area: label; }
.s-affixed-input-wrapper input { grid-area: input; }
.s-affixed-input-wrapper .help-text /* for Django CMS */,
.s-affixed-input-wrapper :--form__help { grid-area: help; }
.s-affixed-input-wrapper .field-errors /* for Django CMS */,
.s-affixed-input-wrapper :--form__errors { grid-area: error; }

/* To render element atop input */
.s-affixed-input-wrapper__prepend,
.s-affixed-input-wrapper__append,
.s-affixed-input-wrapper__prefix,
.s-affixed-input-wrapper__suffix {
  position: relative;
}

/* Grid: Prepend & Append */

/* To layout prefix and suffix beside input */
.s-affixed-input-wrapper--prepend,
.s-affixed-input-wrapper--append {
  grid-template-areas:
    "label label label"
    var(--input-area)
    "help help help"
    "error error error";
}
.s-affixed-input-wrapper__prepend { grid-area: prepend; }
.s-affixed-input-wrapper__append { grid-area: append; }
.s-affixed-input-wrapper--append { --input-area: "input append _____"; }
.s-affixed-input-wrapper--prepend { --input-area: "prepend input _____"; }

/* To shrink input area to match input width */
.s-affixed-input-wrapper--prepend:where(:not([class*="--full-width"])) {
  grid-template-columns: auto auto 1fr; /* to stretch empty space right of input */
}
.s-affixed-input-wrapper--append:where(:not([class*="--full-width"])) {
  grid-template-columns: auto auto 1fr; /* to stretch empty space right of input */
}

/* To stretch input to full width */
.s-affixed-input-wrapper--prepend.s-affixed-input-wrapper--full-width {
  grid-template-columns: auto 1fr auto; /* to shrink empty space right of input */
}
.s-affixed-input-wrapper--append.s-affixed-input-wrapper--full-width {
  grid-template-columns: 1fr auto auto; /* to shrink empty space right of input */
}

/* Grid: Prefix & Suffix */

/* To layout prefix and suffix within input (and before an empty cell) */
/* FAQ: Empty cell adjusts, or is adjusted to, the width of input field */
.s-affixed-input-wrapper--prefix,
.s-affixed-input-wrapper--suffix {
  grid-template-areas:
    "label label"
    "input _____"
    "help help"
    "error error";
}
.s-affixed-input-wrapper__prefix,
.s-affixed-input-wrapper__suffix {
  grid-area: input;
}

/* To shrink input area to match input width */
.s-affixed-input-wrapper--prefix:where(:not([class*="--full-width"])),
.s-affixed-input-wrapper--suffix:where(:not([class*="--full-width"])) {
  grid-template-columns: auto 1fr; /* to stretch empty space right of input */
}

/* To stretch input to full width */
.s-affixed-input-wrapper--prefix.s-affixed-input-wrapper--full-width,
.s-affixed-input-wrapper--suffix.s-affixed-input-wrapper--full-width {
  grid-template-columns: 1fr auto; /* to shrink empty space right of input */
}

/* To position prefix and suffix */
/* FAQ: Prefix has `justify-self: start` by default, but to see it is clearer */
.s-affixed-input-wrapper__prefix { justify-self: start; }
.s-affixed-input-wrapper__suffix { justify-self: end; }



/* Prepnd & Append */

.s-affixed-input-wrapper__prepend,
.s-affixed-input-wrapper__append {
  /* To make this element's border visible, not the input */
  position: relative; /* FAQ: auto z-index bump moves element atop field */
}
.s-affixed-input-wrapper__prepend {
  margin-right: calc( -1 * var(--global-border-width--normal) );
}
.s-affixed-input-wrapper__append {
  margin-left: calc( -1 * var(--global-border-width--normal) );
}



/* Prefix & Suffix */

.s-affixed-input-wrapper--prefix,
.s-affixed-input-wrapper--suffix {
  --width: 1em;
  --padding-vert: 5px; /* mimic input */
  --padding-horz: 10px; /* mimic input */
}

.s-affixed-input-wrapper__prefix,
.s-affixed-input-wrapper__suffix {
  /* To mimic shape of an input */
  display: inline-block;
  padding: var(--padding-vert) var(--padding-horz);

  /* To have consistent size */
  width: var(--width);
  text-align: center;
  box-sizing: content-box;

  /* To limit interaction */
  user-select: none;
  pointer-events: none;

  /* To mimic input font */
  font-family: var(--global-font-family--sans--portal);
}

.s-affixed-input-wrapper__prefix + input {
  text-indent: calc(var(--width) + var(--padding-horz));
}

/* To NOT stretch input to match width of wider label */
/* FAQ: Using `:where()` to reduce specificity */
.s-affixed-input-wrapper--prefix:where(:not([class*="--full-width"])) input,
.s-affixed-input-wrapper--suffix:where(:not([class*="--full-width"])) input {
  width: fit-content;
}