@use "../../wc";
@use "../../form-control";

:host {
  display: block;
}

.input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

/* Gap variants */
.input-group--gap-sm {
  gap: var(--zn-spacing-x-small);
}

.input-group--gap-md {
  gap: var(--zn-spacing-small);
}

.input-group--gap-lg {
  gap: var(--zn-spacing-medium);
}

/* When gap is set, restore individual border radii */
.input-group--gap ::slotted([data-zn-input-group__input]) {
  margin-inline-end: 0;
}

.input-group--gap ::slotted([data-zn-input-group__input--first]),
.input-group--gap ::slotted([data-zn-input-group__input--inner]),
.input-group--gap ::slotted([data-zn-input-group__input--last]) {
  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
  --zn-input-border-radius-small: var(--zn-border-radius-medium);
  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
  --zn-input-border-radius-large: var(--zn-border-radius-medium);
}

/* Common styles for slotted inputs */
::slotted([data-zn-input-group__input]) {
  /* Overlap borders */
  margin-inline-end: -1px;

  /* Ensure focus ring is above */
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

@for $i from 1 through 12 {
  ::slotted([data-zn-input-group__input][span="#{$i}"]) {
    @include wc.media-query(md) {
      flex: #{$i};
    }
  }
}

::slotted([data-zn-input-group__input]:focus-within) {
  z-index: 2;
}

::slotted([data-zn-input-group__input--first]) {
  --zn-input-border-radius-x-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
  --zn-input-border-radius-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
  --zn-input-border-radius-medium: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
  --zn-input-border-radius-large: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
}

::slotted([data-zn-input-group__input--inner]) {
  --zn-input-border-radius-x-small: 0;
  --zn-input-border-radius-small: 0;
  --zn-input-border-radius-medium: 0;
  --zn-input-border-radius-large: 0;
}

::slotted([data-zn-input-group__input--last]) {
  --zn-input-border-radius-x-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
  --zn-input-border-radius-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
  --zn-input-border-radius-medium: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
  --zn-input-border-radius-large: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;

  margin-inline-end: 0;
}

/* Button overrides - don't join to other inputs */
::slotted(zn-button[data-zn-input-group__input]) {
  flex: 0 0 auto;
  margin-inline-start: var(--zn-spacing-x-small);
  margin-inline-end: 0;
}

::slotted(zn-button[data-zn-input-group__input--first]),
::slotted(zn-button[data-zn-input-group__input--inner]),
::slotted(zn-button[data-zn-input-group__input--last]) {
  --zn-input-border-radius-x-small: var(--zn-border-radius-medium);
  --zn-input-border-radius-small: var(--zn-border-radius-medium);
  --zn-input-border-radius-medium: var(--zn-border-radius-medium);
  --zn-input-border-radius-large: var(--zn-border-radius-medium);
}