@import "../base/helpers";
@import "../variables/forms";

.input-form-field {
  [slot=before-input],
  [slot=after-input] {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    height: $input-height;
    padding: $input-padding-y $input-padding-x;
    @include font-size($font-size-md);
    line-height: $input-line-height;
    color: $input-color;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;

    .btn-icon {
      height: 28px;
      width: 28px;
      @include font-size($font-size-md);
    }

    &:is(som-icon) {
      display: inline-flex !important;
    }

    &:is(som-badge) {
      display: flex !important;
    }

    .form-group {
      margin-bottom: unset;
    }
  }

  [slot=before-input] {
    margin-right: -1px;
    border-right: none;
    border-radius: $input-border-radius 0 0 $input-border-radius;
    transition: all 0.3s;

    &:is(som-button-dropdown) {
      padding-inline: 0;
    }
  }

  [slot=after-input] {
    margin-left: -1px;
    border-left: none;
    border-radius: 0 $input-border-radius $input-border-radius 0;
    transition: all 0.3s;

    &:is(som-button-dropdown) {
      padding-inline: 0;
    }
  }

  &:has([slot=before-input]) input {
    border-left: none;
    border-radius: 0 $input-border-radius $input-border-radius 0;

    &:disabled {
      &:hover {
        border-right: $input-border-width solid $input-disabled-border-color;
        box-shadow: none;
      }
  
      &:focus {
        box-shadow: none;
      }
    }

    &:hover {
      border-right: none;
      box-shadow: inset 0 1px 0 0px $input-focus-border-color, inset 0 -1px 0 0px $input-focus-border-color, inset -2px 0 0 0px $input-focus-border-color;
    }

    &:focus {
      box-shadow: inset 0 2px 0 0px $input-focus-border-color, inset 0 -2px 0 0px $input-focus-border-color, inset -2px 0 0 0px $input-focus-border-color;
    }

    &.is-invalid {
      &:hover {
        box-shadow: inset -2px 1px 0 0 $danger-hover, inset 0 -1px 0 0 $danger-hover !important;
      }

      &:focus {
        box-shadow: inset -2px 2px 0 0 $danger-hover, inset 0 -2px 0 0 $danger-hover !important;
      }
    }
  }

  &:has([slot=after-input]) input {
    border-right: none;
    border-radius: $input-border-radius 0 0 $input-border-radius;

    &:disabled {
      &:hover {
        border-right: none;
        box-shadow: none;
      }
  
      &:focus {
        box-shadow: none;
      }
    }

    &:hover {
      border-right: none;
      box-shadow: inset 0 1px 0 0px $input-focus-border-color, inset 0 -1px 0 0px $input-focus-border-color, inset 1px 0 0 0px $input-focus-border-color;
    }

    &:focus {
      box-shadow: inset 0 2px 0 0px $input-focus-border-color, inset 0 -2px 0 0px $input-focus-border-color, inset 2px 0 0 0px $input-focus-border-color;
    }

    &.is-invalid {
      &:hover {
        box-shadow: inset 1px 1px 0 0 $danger-hover, inset 0 -1px 0 0 $danger-hover !important;
      }

      &:focus {
        box-shadow: inset 2px 2px 0 0 $danger-hover, inset 0 -2px 0 0 $danger-hover !important;
      }
    }
  }

  &:has([slot=before-input]):has([slot=after-input]) input {
    &:hover {
      box-shadow: inset 0 1px 0 0 $input-focus-border-color, inset 0 -1px 0 0 $input-focus-border-color;
    }

    &:focus {
      box-shadow: inset 0 2px 0 0 $input-focus-border-color, inset 0 -2px 0 0 $input-focus-border-color;
    }

    &.is-invalid {
      &:hover {
        box-shadow: inset 0 1px 0 0 $danger-hover, inset 0 -1px 0 0 $danger-hover !important;
      }

      &:focus {
        box-shadow: inset 0 2px 0 0 $danger-hover, inset 0 -2px 0 0 $danger-hover !important;
      }
    }

    border-radius: 0;
  }

  &:has(input:hover) {
    [slot=before-input] {
      border: 1px solid $input-focus-border-color;
      border-right: none;
      box-shadow: inset 1px 0 0 0px $input-focus-border-color, inset 0px 1px 0 0px $input-focus-border-color, inset 0px -1px 0 0px $input-focus-border-color;
    }

    [slot=after-input] {
      border: 1px solid $input-focus-border-color;
      border-left: none;
      box-shadow: inset -1px 0 0 0px $input-focus-border-color, inset 0px -1px 0 0px $input-focus-border-color, inset 0px 1px 0 0px $input-focus-border-color;
    }
  }

  &:has(.is-invalid) [slot=before-input],
  &:has(.is-invalid) [slot=after-input] {
    border-color: $danger;
  }

  &:has(.is-invalid:hover) {
    [slot=before-input] {
      border: 1px solid $danger-hover;
      border-right: none;
      box-shadow: inset 1px 0 0 0px $danger-hover, inset 0px 1px 0 0px $danger-hover, inset 0px -1px 0 0px $danger-hover;
    }

    [slot=after-input] {
      border: 1px solid $danger-hover;
      border-left: none;
      box-shadow: inset -1px 0 0 0px $danger-hover, inset 0px -1px 0 0px $danger-hover, inset 0px 1px 0 0px $danger-hover;
    }
  }

  &:has(input:focus) {
    [slot=before-input] {
      border: 1px solid $input-focus-border-color;
      border-right: none;
      box-shadow: inset 2px 0 0 0px $input-focus-border-color, inset 0px 2px 0 0px $input-focus-border-color, inset 0px -2px 0 0px $input-focus-border-color;
    }

    [slot=after-input] {
      border: 1px solid $input-focus-border-color;
      border-left: none;
      box-shadow: inset -2px 0 0 0px $input-focus-border-color, inset 0px -2px 0 0px $input-focus-border-color, inset 0px 2px 0 0px $input-focus-border-color;
    }
  }

  &:has(.is-invalid:focus) {
    [slot=before-input] {
      border: 1px solid $danger-hover;
      border-right: none;
      box-shadow: inset 2px 0 0 0px $danger-hover, inset 0px 2px 0 0px $danger-hover, inset 0px -2px 0 0px $danger-hover;
    }

    [slot=after-input] {
      border: 1px solid $danger-hover;
      border-left: none;
      box-shadow: inset -2px 0 0 0px $danger-hover, inset 0px -2px 0 0px $danger-hover, inset 0px 2px 0 0px $danger-hover;
    }
  }

  &:has(input[disabled]) {
    [slot=before-input],
    [slot=after-input] {
      background-color: $input-disabled-bg;
      color:  $input-disabled-text;
      border-color: $input-disabled-border-color;
      box-shadow: none;
      opacity: 1;
    }
  }

  &:has(input[readonly]) {
    [slot=before-input],
    [slot=after-input] {
      background-color: $input-readonly-bg;
      color:  $input-readonly-text;
      opacity: 1;
    }
  }
}