/**
 * Layout Pattern: Input Group (v2.0 - Flexbox-based & Robust)
 * This is the industry-standard implementation for creating input fields
 * with prepended or appended elements. It's fully responsive and content-aware.
 */

.dig-input-group {
  display: flex;
  position: relative; /* Still useful for child elements if needed, but not for main layout */
  width: 100%;
}

.dig-input-group .dig-form-control {
  /* 
   * This is the core of the flexbox magic:
   * - flex-grow: 1 (allow it to grow and fill space)
   * - flex-shrink: 1 (allow it to shrink if needed)
   * - flex-basis: auto (start at its natural width)
   * - width: 1%: A flexbox hack to prevent the input from overflowing its container.
   */
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0; /* Ensures the input can shrink below its content size */
}

.dig-input-group__prepend,
.dig-input-group__append {
  display: flex;
  align-items: center;
  padding: 0 var(--dig-spacing-sm);
  color: var(--dig-color-text-muted);
  background-color: var(--dig-color-bg-alt);
  border: 1px solid var(--dig-color-border);
  white-space: nowrap; /* Prevents text in buttons from wrapping */
}

/* --- Visual Stitching: Merging borders and corners --- */

.dig-input-group__prepend {
  border-right: 0;
  border-radius: var(--dig-radius-base) 0 0 var(--dig-radius-base);
}

.dig-input-group__append {
  border-left: 0;
  border-radius: 0 var(--dig-radius-base) var(--dig-radius-base) 0;
}

/* When a prepend element exists, flatten the input's left corners */
.dig-input-group.has-prepend .dig-form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* When an append element exists, flatten the input's right corners */
.dig-input-group.has-append .dig-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Ensure the prepend/append element is in front of the input's focus outline */
.dig-input-group .dig-form-control:focus {
  z-index: 3;
}