@import "settings";
@import "select";
@import "dropdowns";

/// Flag whether or not you want to include bonsai text-input components
/// @type Bool
$bonsai-include-text-input: $bonsai-include-components !default;

/// Form spacing to override Foundation
/// @type Number
$bonsai-form-spacing: rem-calc(16) !default;

/// Font weight for form labels
/// @type String
$bonsai-form-label-font-weight: bold !default;

/// Font size for form labels
/// @type Number
$bonsai-form-label-font-size: $bonsai-global-font-size !default;

/// Input element border styling
/// @type List
$bonsai-input-border: $bonsai-standard-border !default;

/// Input element border radius
/// @type Number
$bonsai-input-radius: 3px !default;

/// Input element shadow styling
/// @type List
$bonsai-input-shadow: inset 0 0 $bonsai-spacing-base get-color(light-gray);

/// Input element height
/// @type Number
$bonsai-text-input-height: 40px !default;

/// Input element horizontal padding
/// @type Number
$bonsai-text-input-padding-horizontal: ($bonsai-spacing-base * 4) !default;

/// Number to adjust the space between the vertical separator and the secondary button
/// @type Number
$bonsai-secondary-button-separator-padding: 6px !default;

/// Color of icon when input passes validation
/// @type Color
$bonsai-input-success-check: $bonsai-yellow-green !default;

/// Style of border when input fails validation
/// @type List
$bonsai-input-border-error: 1px solid $bonsai-alert !default;

/// Style of box shadow when input fails validation
/// @type List
$bonsai-input-box-shadow-error: inset 0 0 $bonsai-spacing-base $bonsai-alert !default;

/// Position of icon from the right of the input element
/// @type Number
$bonsai-input-icon-right-spacing: $bonsai-spacing-medium !default;

/// Position of icon from the top of the input element
/// @type Number
$bonsai-input-icon-top-spacing: 35px !default;

/// Input icon size
/// @type Number
$bonsai-input-icon-size: 20px !default;

/// Bonsai button line height
/// @type Number
$bonsai-button-line-height: 28px !default;

// Foundation configuration
$form-label-font-weight: $bonsai-form-label-font-weight;
$form-label-font-size: $bonsai-form-label-font-size;
$form-label-line-height: unitless-calc(26px, $bonsai-form-label-font-size);

$input-border: $bonsai-input-border;
$input-radius: $bonsai-input-radius;
$input-border-focus: 1px solid $bonsai-focus;
$input-shadow: $bonsai-input-shadow;
$input-shadow-focus: inset 0 0 $bonsai-spacing-base get-color(hover);
$input-background-disabled: get-color(very-light-gray);
$form-spacing: $bonsai-form-spacing;

$inline-button-padding-increment: ($bonsai-text-input-height - $bonsai-button-line-height) / 2;

/// Base styling for text, password & date input fields
@mixin input-styles {
  height: $bonsai-text-input-height;
  padding: 0 $bonsai-text-input-padding-horizontal;

  &:disabled {
    color: $bonsai-disabled-text;
  }

  &::placeholder {
    color: #676765;
  }

  &:-ms-input-placeholder {
    color: #676765;
  }
}

/// Shared styling structure for success & error inputs
/// @param {String} $icon-name - Icon to show within the input element
/// @param {Color} $icon-color - Color of input element icon
/// @param {List} $custom-input-border - Border for input element
/// @param {Color | Bool} $custom-color - Input element text color, if not 'false'
/// @param {Bool} $max-width - Flag to say if width is 100% or auto
@mixin input-container($icon-name: "", $icon-color: $bonsai-primary, $custom-input-border: $input-border, $custom-color: false, $max-width: true) {
  @if $custom-color {
    &,
    input:not([type=checkbox]):not([type=radio]) {
      color: $custom-color;
    }
  }

  @if $max-width {
    width: 100%;
  }

  position: relative;

  input {
    position: relative;
    border: $custom-input-border;

    @if $custom-input-border != $input-border {
      &:not([type=checkbox]):not([type=radio]):focus {
        border: $custom-input-border;
        box-shadow: $bonsai-input-box-shadow-error;
      }
    }
  }

  &::after {
    @include fa-icon();

    content: $icon-name;
    color: $icon-color;
    position: absolute;
    text-align: center;
    right: $bonsai-input-icon-right-spacing;
    top: $bonsai-input-icon-top-spacing;
    font-size: $bonsai-input-icon-size;
    width: $bonsai-input-icon-size;
  }
}

/// Input validation success styling
@mixin input-success-styles {
  @include input-container($fa-var-check, $bonsai-input-success-check, $max-width: false);
}

/// Input validation error styling
@mixin input-error-styles {
  @include input-container($fa-var-exclamation, $bonsai-alert, $bonsai-input-border-error, $bonsai-alert, $max-width: false);

  input {
    margin-bottom: 0;
  }
}

/// Styling for the input box when there is a an inline action
@mixin input-with-action-styles {
  border-right: none;

  &:not(:focus) {
    box-shadow: inset 1px 0 10px -3px $bonsai-light-gray;
  }

  &:focus ~ .input-group-field.select {
    &::before {
      border: transparent;
    }

    select {
      padding-left: 9px;
      margin-left: 0;
    }
  }

  &:focus ~ .input-group-button {
    border-color: $bonsai-hover;

    .button.secondary {
      background-color: $bonsai-hover;
      color: $bonsai-white;
      box-shadow: none;

      &::before {
        border: none;
      }
    }
  }
}

/// Styling of the button group that contains the inline action button
@mixin input-group-button {
  height: $bonsai-text-input-height;
  border: $bonsai-input-border;
  border-left: none;
  border-radius: 0 $bonsai-button-radius $bonsai-button-radius 0;
}

/// Styling of the inline action button tied to the input
@mixin input-button-styles {
  font-size: 15px;
  line-height: $bonsai-button-line-height;
  border: none;
  border-radius: 0;
  padding: $inline-button-padding-increment ($inline-button-padding-increment * 2);
  height: 100%;
}

/// Styling of the separator between the input and secondary styled inline action button
@mixin input-button-secondary-separator {
  @include vertical-rule-helper(100%, 0);

  content: "";
  padding: $bonsai-secondary-button-separator-padding $inline-button-padding-increment;
}

/// Styling of the secondary button hover state
@mixin input-button-secondary-hover {
  @include button-hover-style;

  border: none;

  &::before {
    border-color: $button-color-hover;
  }
}

/// Secondary button styling
@mixin input-button-styles-secondary {
  box-shadow: inset -1px 0 10px -3px $bonsai-light-gray;
  padding-left: 0;

  &::before {
    @include input-button-secondary-separator;
  }

  &:active,
  &:focus,
  &:hover {
    @include input-button-secondary-hover;
  }
}

/// Gateway mixin for bonsai text inputs
@mixin bonsai-inputs {
  @if $bonsai-include-text-input {
    input[type="text"],
    input[type="password"],
    input[type="date"] {
      @include input-styles;
    }

    .input-success {
      @include input-success-styles;
    }

    .input-error {
      @include input-error-styles;
    }

    .input-search-autocomplete {
      @include input-container($fa-var-search);
    }

    .input-group {
      input.input-group-field {
        @include input-with-action-styles;
      }

      .input-group-button {
        @include input-group-button;

        .button {
          @include input-button-styles;

          &.secondary {
            @include input-button-styles-secondary;
          }
        }
      }
    }
  }
}