/* Input groups
******************************************************************************* */

$validation-messages: "" !default;
@each $state in map-keys($form-validation-states) {
  $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
}

/* Using :focus-within to apply focus/validation border and shadow to default and merged input-group */
.input-group {
  --#{$prefix}input-group-addon-border-color: #{$input-group-addon-border-color};
  --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
  &:has(.form-check-input):not(:has(.dropdown-toggle)) {
    z-index: 1;
    &::before {
      z-index: -1;
    }
  }
  @include border-radius($input-border-radius);

  // Input group (Default)
  .input-group-text {
    border-color: var(--#{$prefix}input-group-addon-border-color);
    @include transition($input-transition);
  }

  .flatpickr-wrapper {
    flex: 1 1 auto;
    inline-size: 1%;
    min-inline-size: 0;
  }
  > .flatpickr-wrapper:not(:first-child):not(.dropdown-menu)#{$validation-messages} {
    .flatpickr-input {
      @include border-start-radius(0);
    }
  }

  .form-control,
  .form-select,
  .input-group-text {
    &:focus,
    &:focus-within {
      border-width: $input-border-width;
    }
  }
  &,
  .was-validated &:has(:invalid),
  .was-validated &:has(:valid) {
    .form-control,
    .input-group-text {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        padding-block: calc($input-padding-y - $input-border-width);
        padding-inline: calc($input-padding-x - $input-border-width);
      }
    }
    .form-select {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        background-position: right calc($form-select-padding-x) center;
        padding-block: calc($form-select-padding-y - $input-border-width);
        padding-inline-end: calc($form-select-indicator-padding - $input-border-width);
        padding-inline-start: calc($form-select-padding-x - $input-border-width);
        :dir(rtl) & {
          background-position: left calc($form-select-padding-x) center;
        }
      }
    }
  }
  &.input-group-sm,
  .was-validated &.input-group-sm:has(:invalid),
  .was-validated &.input-group-sm:has(:valid) {
    .form-control,
    .input-group-text {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        padding-block: $input-padding-y-sm;
        padding-inline: calc($input-padding-x-sm - $input-border-width);
      }
    }
    .form-select {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        background-position: right calc($form-select-padding-x-sm) center;
        padding-block: $form-select-padding-y-sm;
        padding-inline: $form-select-padding-x-sm;
        padding-inline-start: calc($form-select-padding-x-sm - $input-border-width);
        :dir(rtl) & {
          background-position: left calc($form-select-padding-x-sm) center;
        }
      }
    }
  }
  &.input-group-lg,
  .was-validated &.input-group-lg:has(:invalid),
  .was-validated &.input-group-lg:has(:valid) {
    .form-control,
    .input-group-text {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        padding-block: $input-padding-y-lg;
        padding-inline: calc($input-padding-x-lg - $input-border-width);
      }
    }
    .form-select {
      &,
      &:focus,
      &:focus-within,
      .was-validated &:invalid,
      .was-validated &:valid,
      &.is-invalid,
      &.is-valid {
        background-position: right calc($form-select-padding-x-lg) center;
        padding-block: $form-select-padding-y-lg;
        padding-inline: $form-select-padding-x-lg;
        padding-inline-start: calc($form-select-padding-x-lg - $input-border-width);
        :dir(rtl) & {
          background-position: left calc($form-select-padding-x-lg) center;
        }
      }
    }
  }

  &::before {
    position: absolute;
    display: block;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    @include border-radius($input-border-radius);
  }

  &.input-group-lg {
    &,
    &::before {
      @include border-radius($input-border-radius-lg);
    }
  }
  &.input-group-sm {
    &,
    &::before {
      @include border-radius($input-border-radius-sm);
    }
    &,
    .was-validated &.input-group-sm:has(:invalid),
    .was-validated &.input-group-sm:has(:valid) {
      .form-control,
      .input-group-text {
        &,
        &:focus,
        &:focus-within,
        .was-validated &:invalid,
        .was-validated &:valid,
        &.is-invalid,
        &.is-valid {
          padding-block: $input-padding-y-sm;
          padding-inline: $input-padding-x-sm;
        }
      }
      .form-select {
        &,
        &:focus,
        &:focus-within,
        .was-validated &:invalid,
        .was-validated &:valid,
        &.is-invalid,
        &.is-valid {
          background-position: right calc($form-select-padding-x-sm) center;
          padding-block: $form-select-padding-y-sm;
          padding-inline: $form-select-padding-x-sm;
          padding-inline-start: calc($form-select-padding-x-sm - $input-border-width);
          :dir(rtl) & {
            background-position: left calc($form-select-padding-x-sm) center;
          }
        }
      }
    }
  }
  > :not(:first-child, .dropdown-toggle-split).dropdown-toggle#{$validation-messages} {
    margin-inline-start: 0;
  }
  > .form-control + .btn:has(+ .btn.dropdown-toggle-split)#{$validation-messages},
  > .form-control ~ .btn:last-child#{$validation-messages} {
    margin-inline-end: calc(-1 * #{$input-border-width});
  }

  &:hover {
    .input-group-text,
    .form-control,
    .form-select {
      border-color: $input-hover-border-color;
    }
  }

  /*
  ? Info :focus-within to apply focus/validation border and shadow to default and merged input & input-group */
  &:focus-within,
  &:focus {
    box-shadow: 0 0 0 $input-border-width $input-focus-border-color;
    &::before {
      box-shadow: $input-focus-box-shadow;
    }
    &:not(.input-group-merge) {
      .form-control,
      .form-select,
      .input-group-text,
      .btn,
      .form-control::file-selector-button {
        box-shadow: $input-border-width 0 0  $input-focus-border-color;
      }
    }
    &.has-validation:not(.input-group-merge) {
      .form-control.is-invalid,
      .form-select.is-invalid,
      .input-group-text:has(~ .is-invalid),
      .btn,
      .form-control::file-selector-button {
        box-shadow: $input-border-width 0 0  var(--#{$prefix}form-validation-border-color);
      }
    }
    .input-group-text,
    .form-control,
    .form-select {
      border-color: $input-focus-border-color;
      &:hover {
        border-color: $input-focus-border-color;
      }
    }
  }

  // Input group merge
  &.input-group-merge {
    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
      margin-inline: 0;
    }
    &:not(.disabled) > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not(.btn + .form-control)#{$validation-messages} {
      margin-inline-start: calc($input-focus-border-width - 4px);
    }
    .input-group-text,
    .form-control,
    .form-select {
      &,
      &:focus,
      &:focus-within {
        box-shadow: none;
      }
      &:first-child {
        border-inline-end: 0;
      }
      &:last-child {
        border-inline-start: 0;
      }
      &:not(:first-child) {
        border-inline-start: 0;
        padding-inline-start: 0;
      }
      &:not(:last-child) {
        border-inline-end: 0;
      }
    }
    .flatpickr-wrapper {
      .flatpickr-input {
        border: $input-border-width solid $input-border-color;
        &:hover {
          &:not(:focus):not(:disabled) {
            border-color: $input-hover-border-color;
          }
        }
      }
      &:first-child {
        .flatpickr-input {
          border-inline-end: 0;
        }
      }
      &:last-child {
        .flatpickr-input {
          border-inline-start: 0;
        }
      }
      &:not(:first-child):not(:last-child) {
        .flatpickr-input {
          border-inline-end: 0;
          border-inline-start: 0;
        }
      }
    }
    &:focus-within,
    &:focus {
      .flatpickr-wrapper {
        .flatpickr-input {
          border-color: $input-focus-border-color;
        }
      }
    }
    &.disabled,
    &[disabled] {
      margin-inline: 0 !important;
    }
  }

  // Rounded pill option
  &.rounded-pill {
    .input-group-text,
    .form-control,
    .form-select,
    &::before {
      @include border-radius($border-radius-pill);
    }
  }

  // For disabled input group
  &.disabled,
  &[disabled] {
    .input-group-text,
    .form-control,
    .form-select {
      border-color: var(--#{$prefix}input-group-disabled-border-color);
      background-color: $input-disabled-bg;
      color: var(--#{$prefix}secondary-color);
      pointer-events: none;
    }
    .form-select {
      background-image: escape-svg($form-select-disabled-indicator);
    }
  }

  // Form validation border radius issue
  &.has-validation {
    > .input-group-text:first-child,
    > .form-control:first-child {
      @include border-end-radius(0);
    }

    > .form-control:not(:first-child):not(:last-child) {
      @include border-radius(0);
    }
  }
}

/* input-group-text icon size */
.input-group-text {
  background-clip: padding-box;

  /* Adding transition (On focus border color change) */
  @include transition($input-transition);
}

.input-group-lg > .input-group-text {
  .icon-base{
    block-size: 1.375rem;
    font-size: 1.375rem;
    inline-size: 1.375rem;
  }
}

.input-group-sm > .input-group-text {
  .icon-base{
    block-size: 1.125rem;
    font-size: 1.125rem;
    inline-size: 1.125rem;
  }
}

/* RTL theme */
:dir(Rtl) {
  .input-group {
    > :not(:first-child, .dropdown-menu)#{$validation-messages} {
      margin-inline-end: 0;
    }
    > .btn:has( + .btn)#{$validation-messages} {
      margin-inline-end: -1px;
    }
  }
}

/* Dark Theme */
@if $enable-dark-mode {
  @include color-mode(dark) {
    .input-group {
      --#{$prefix}input-group-addon-border-color: #{$input-group-addon-border-color-dark};
      --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color-dark};
      &.disabled,
      &[disabled] {
        .form-select {
          background-image: escape-svg($form-select-disabled-indicator-dark);
        }
      }
    }
  }
}