/* =========================
   Input group
========================= */

@use "../kit-deps" as *;

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 600px;
  min-height: $control-height-md;
  border: $border-width-base $border-style-base $neutral-300;
  border-bottom-width: $border-width-accent;
  border-radius: $radius-lg;
  background-color: $neutral-0;
  overflow: hidden;
  transition:
    border-color $motion-base $motion-ease,
    box-shadow $motion-base $motion-ease,
    background-color $motion-base $motion-ease;

  &:focus-within {
    @include focus_ring;
    border-color: $mint-600;
    background-color: $neutral-0;
  }

  .input-group-addon,
  .input-group-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: $control-height-md;
    padding: 0 $space-3;
    color: $neutral-700;
    background-color: $neutral-50;
    border: 0;
    border-radius: 0;
    font-family: $font-family-base;
    font-size: 14px;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;

    .vmk-icon {
      font-size: $icon-size-md;
      color: currentColor;
    }

    // Any nested icon button should fill the action slot seamlessly.
    & .btn {
      min-height: auto;
      width: $control-height-md;
      height: $control-height-md;
      margin: -$space-3;
      padding: 0;
      border: 0;
      border-radius: 0;
      background-color: transparent;
      color: inherit;

      &:hover:not(:disabled):not(.is-disabled) {
        background-color: rgba($neutral-900, 0.06);
      }
    }
  }

  .input-group-action {
    color: $mint-800;
    background-color: $neutral-50;
    cursor: pointer;
    transition:
      color $motion-base $motion-ease,
      background-color $motion-base $motion-ease;

    &:hover:not(:disabled):not(.is-disabled) {
      background-color: $mint-100;
      color: $mint-900;
    }
  }

  .input-group-input,
  input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: auto;
    padding: $space-3 $space-4;
    color: $neutral-900;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    font-family: $font-family-base;
    font-size: 15px;
    font-weight: $font-weight-medium;
    line-height: 1.25;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: $neutral-500;
    }

    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
      -webkit-appearance: none;
    }
  }

  &.input-group-compact {
    min-height: $control-height-sm;
    border-radius: $radius-md;

    .input-group-addon,
    .input-group-action {
      min-width: $control-height-sm;

      & .btn {
        width: $control-height-sm;
        height: $control-height-sm;
        margin: calc(-1 * #{$space-2}) calc(-1 * #{$space-3});
      }
    }

    .input-group-input,
    input {
      padding: $space-2 $space-3;
      font-size: 14px;
    }
  }
}