// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "../settings/forms";
@import "../settings/inputs";
@import "../settings/typography";

@import "../tools/mixins/core";
@import "../tools/mixins/clearfix";
@import "../tools/mixins/baseline";
@import "../tools/mixins/grid";
@import "../tools/mixins/spacing-responsive";
@import "../tools/mixins/vendor-prefixes";

@import "../tools/placeholders/sticky";
@import "../tools/placeholders/typography";

// We use this mixin to give us form styles for rows inside of forms
@mixin form-row-base {
  .row {
    margin: 0 ((-$form-spacing) / 2);

    .column,
    .columns { padding: 0 ($form-spacing / 2); }

    // Use this to collapse the margins of a form row
    &.collapse {
      margin: 0;

      .column,
      .columns { padding: 0; }
      input {
        @include side-radius($opposite-direction, 0);
      }
    }
  }
  input.column,
  input.columns,
  textarea.column,
  textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
}

// We use this mixin to create postfix/prefix form Labels
@mixin prefix-postfix-base {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
  padding-top: 0;
  padding-bottom: 0;
  overflow: $input-prefix-overflow;
  font-size: $form-label-font-size;
  line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
  text-align: center;
  border-style: $input-prefix-border-type;
  border-width: $input-prefix-border-size;
}

// @MIXIN
//
// We use this mixin to create prefix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default:false
//
@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    border-#{$opposite-direction}: none;

    // Control the font color based on background brightness
    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
    @else { color: $input-prefix-font-color-alt; }
  }

  @if $border {
    border-color: $border;
  }

  @if $is-button {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    border: none;
    padding-#{$default-float}: 0;
    padding-#{$opposite-direction}: 0;
  }
}

// @MIXIN
//
// We use this mixin to create postfix label styles
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    @if $border-left-hidden {
      border-#{$default-float}: none;
    }

    // Control the font color based on background brightness
    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
    @else { color: $input-prefix-font-color-alt; }
  }

  @if $border {
    border-color: $border;
  }

  @if $is-button {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    border: none;
    padding-#{$default-float}: 0;
    padding-#{$opposite-direction}: 0;
  }

}

// We use this mixin to style fieldsets
@mixin fieldset {
  padding: $fieldset-padding;
  margin: $fieldset-margin;
  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;

  // and legend styles
  legend {
    padding: $legend-padding;
    margin: 0;
    font-weight: $legend-font-weight;
    background: $legend-bg;
    margin-#{$default-float}: rem-calc(-3);
  }
}

// @MIXIN
//
// We use this simple mixin to style labels for error inputs
// $color - Default:$red-base. Found in settings file
// @mixin form-label-error-color($color:$red-base) { color: $color; }

// @MIXIN
//
// We use this mixin to create error message styles
// $bg - Default: $red-base (Found in settings file)
@mixin form-error-message($bg:$input-error-message-bg-color) {
  display: block;
  padding: $input-error-message-padding;
  margin-top: $input-error-message-top;
  margin-bottom: $form-spacing;
  font-size: $input-error-message-font-size;
  font-style: $input-error-message-font-style;
  font-weight: $input-error-message-font-weight;

  // We can control the text color based on the brightness of the background.
  $bg-lightness: lightness($bg);
  background: $bg;
  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
  @else { color: $input-error-message-font-color-alt; }
}

// We use this mixin to style select elements
@mixin form-select  {
  background-color: $select-bg-color;
  border-radius: 0;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  // Hide the dropdown arrow shown in newer IE versions
  &::-ms-expand {
    display: none;
  }

  // The custom arrow has some fake horizontal padding so we can align it
  // from the right side of the element without relying on CSS3
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);

  // We can safely use leftmost and rightmost now
  background-position: if($text-direction == 'rtl', 0%, 100%) center;

  background-repeat: no-repeat;
  border: {
    style: $input__border-style;
    width: $input__border-width;
    color: $input-border-color;
  }
  color: $input__font-color;
  font-family: $input-font-family;
  font-size: $input-font-size;
  line-height: normal;
  padding: ($form-spacing / 2);
  @include radius(0);
  &.radius { @include radius($global-radius); }
  &:hover {
    background-color: $select-hover-bg-color;
    border-color: $input-focus-border-color;
  }
  // Disabled Styles
  &:disabled {
    background-color: $input-disabled-bg;
    cursor: $input-disabled-cursor;
  }
}

// We use this mixin to turn on/off HTML5 number spinners
@mixin html5number($browser, $on:true) {
  @if $on==false {
      @if $browser==webkit {
        -webkit-appearance: none;
        margin: 0;
      } @else if $browser==moz {
        -moz-appearance: textfield;
      }
  }
}

// We use this mixin to create postfix/prefix form Labels
@mixin prefix-postfix-base {
  position: relative;
  display: block;
  width: 100%;
  overflow: $input-prefix-overflow;
  font-size: $form-label-font-size;
  text-align: center;
  border-style: $input-prefix-border-type;
  border-width: $input-prefix-border-size;

  &:not(.prefix) {
    border-left: none;
  }
}

// We use this mixin to style select elements
@mixin form-select {
  transition: border-color ease-in .15s, box-shadow ease-in .15s;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: $select-bg-color;

  //border-radius: 0;

  // Hide the dropdown arrow shown in newer IE versions
  &::-ms-expand {
    display: none;
  }

  // This custom double arrow has some fake horizontal padding so we can align it
  // from the right side of the element without relying on CSS3
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='100%' viewBox='-35 -25 100 100'><polyline points='35,20 25,5 15,20'/><polyline points='35,30 25,45 15,30'/></svg>");

  // We can safely use leftmost and rightmost now
  background-position: if($text-direction == 'rtl', 0%, 100%) center;
  background-repeat: no-repeat;
  border: {
    style: $input__border-style;
    width: $input__border-width;
    color: $input-border-color;
  };
  color: $input-font-color;
  font-family: $input-font-family;
  font-size: $input-font-size;
  line-height: normal;
  padding: $form-spacing / 2 - rem-calc($input__border-width);

  &:focus {
    background-color: $select-hover-bg-color;
    border-color: $input-focus-border-color;
    transition: border-color ease-in .15s, box-shadow ease-in .15s;

    @include box-shadow(0 0 2px 1px $focus-color);
  }

  // Disabled Styles
  &:disabled {
    cursor: $input-disabled-cursor;
    background-color: $input-disabled-bg;
  }
}

.form-group {
  @include clearfix;
}
.form-group, .formly-field-group {
  margin-bottom: $form-spacing / 2;
}

.form-control-feedback {
  position: absolute;
  top: 6px;
  right: 0;
  .has-error & i {
    color: $red-base;
    cursor: pointer;
  }
}

.has-error .form-control, .has-error .form-inline {
    border-color: transparent;
    box-shadow: 0 0 0 2px $red-base;
}

.formly-input-wrapper[class*='col-'] {
  float: left;
}

.description-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: $steel;
}

// Inline Forms
@mixin form-inline {

  // Kick in the inline
  @media (min-width: $screen-sm-min) {
    // Inline-block all the things for 'inline'
    .form-group {
      display: inline-block;
      width: auto;
      margin-bottom: 0;
      vertical-align: middle;
    }

    .formly-field-inline &.formly-field-input input {
      margin-bottom: 0;
    }

    // In top-bar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      word-wrap: break-word;
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
      word-wrap: break-word;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }
    .radio input[type='radio'],
    .checkbox input[type='checkbox'] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}
form.form-inline, .form-inline {
  @include form-inline;
  label {
    display: block
  }
  input {
    margin-left: 0
  }
  .input-group-btn {
    display: table-cell
  }
  .input-group {
    .cui-button {
      margin-left: 0
    }
  }
}

// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

form.form-horizontal {

  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    padding-top: ($padding-base-vertical + 1); // Default padding plus a border
    margin-top: 0;
    margin-bottom: 0;
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: ($line-height-computed + ($padding-base-vertical + 1));
  }

  // Make form groups behave like rows
  .form-group {
    margin-right: 0;
    margin-left: 0;
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: $screen-sm-min) {
    label.control-label{
      padding-top: ($padding-base-vertical + 1); // Default padding plus a border
      margin-bottom: 0;
      text-align: right;
    }
  }

  // Validation states
  //
  // Reposition the icon because it's now within a grid column and columns have
  // `position: relative;` on them. Also accounts for the grid gutter padding.
  .has-feedback .form-control-feedback {
    right: -1 * floor(($grid-gutter-width / 2));
  }

  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: (($padding-large-vertical * $line-height-large) + 1);
        font-size: $font-size-large;
      }
    }
  }
  .form-group-sm {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: ($padding-small-vertical + 1);
        font-size: $font-size-small;
      }
    }
  }
}

@include exports('cui-form') {
  form,
  .cui-form {
    margin: 0 0 $form-spacing;
    // Using forms within rows, we need to set some defaults
    .row {
      @include form-row-base;
    }
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }
  // Allow adding grid column classes directly to inputs.
  [class*=column] {
    & > input[type],
    & > select,
    & > textarea {
      &:not([class*=column]):not([type=submit]):not([type=file]) {
        width: 100%;
      }
    }
  }
  input[type='submit'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  // Respect enforced amount of rows for textarea
  textarea[rows] {
    height: auto;
  }
  // Not allow resize out of parent
  textarea {
    max-width: 100%;
    padding-top: rem-calc(2px);
    padding-bottom: rem-calc(2px);
  }
  // Add height value for select elements to match text input height
  select {
    @include form-select;
    //height: $input-font-size + $form-spacing * 1.5 - rem-calc(1);
    &[multiple] {
      height: auto;
    }
  }
  // Adjust margin for form elements below
  input[type='file'],
  select {
    margin: 0 0 $form-spacing 0;
  }
  // Normalize file input width
  input[type='file'] {
    width: 100%;
  }
  // HTML5 Number spinners settings
  input[type='number'] {
    @include html5number(moz, $input-number-spinners);
  }
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    @include html5number(webkit, $input-number-spinners);
  }
  // We add basic fieldset styling
  fieldset {
    @include fieldset;
    @include vr-spacing(p, 0);
  }

  .cui-form__section {
    @media #{$medium-up} {
      // required to set sticky element container height
      display: flex;
      align-items: stretch;
    }
    @include grid-row($behavior: nest-collapse);
    border-bottom: $form-section-border-color 1px solid;
    @include vr-spacing(pt, 2);
    @include vr-spacing(pb, 3);
    @include vr-spacing(ph, 2);
    &:last-child {
      border-color: transparent;
    }
    .cui-input-group {
      &:last-child {
        margin-bottom: 0;
      }
      & > input[type],
      & > select,
      & > textarea {
        &:not([class*='column']):not([type='submit']):not([type='file']) {
          width: 100%;
        }
      }
    }
    .cui-input-row {
      @include grid-row();
      @include form-row-base;
      @include vr-spacing(mb, 1);
    }
    .section__info {
      @media #{$small-only} {
        @include vr-spacing(mb, 2.25);
      }
      .section__title {
        @extend %h4;
        @include vr-spacing(mb, .5);
      }
      @media #{$medium-up} {
        @include grid-column( $columns: 4, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
      @media #{$large-up} {
        @include grid-column( $columns: 3, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
      @media #{$xxlarge-up} {
        @include grid-column( $columns: 2, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
    }

    > .section__info {
      align-self: stretch;
      .sticky {
        @extend %sticky;
        &.sticky--active {
          display: block;
        }
      }
    }

    .section__content {
      .sub-section {
        @include vr-spacing(mb, 2.25);
        &:last-child {
          margin-bottom: 0;
        }
        &__label,
        &__title {
          @extend %h5;
          @include vr-spacing(mb, .75);
        }
        &__description {
          @extend .p;
          @include vr-spacing(mb, 1);
        }
      }
      @media #{$medium-up} {
        @include vr-spacing(mt, .25);
        @include grid-column( $columns: 7, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
      @media #{$large-up} {
        @include grid-column( $columns: 6, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
      @media #{$xlarge-up} {
        @include grid-column( $columns: 5, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
      }
    }
    .reveal-modal & {
      padding-right: 0;
      padding-left: 0;
      &:first-child {
        padding-top: 0;
      }
      .section__info {
        @media #{$medium-up} {
          @include grid-column( $columns: 4, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
        @media #{$large-up} {
          @include grid-column( $columns: 4, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
        @media #{$xxlarge-up} {
          @include grid-column( $columns: 4, $last-column: false, $center: false, $offset: 0, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
      }
      .section__content {
        @media #{$medium-up} {
          @include vr-spacing(mt, .25);
          @include grid-column( $columns: 6, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
        @media #{$large-up} {
          @include vr-spacing(mt, .25);
          @include grid-column( $columns: 6, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
        @media #{$xlarge-up} {
          @include vr-spacing(mt, .25);
          @include grid-column( $columns: 6, $last-column: true, $center: false, $offset: 1, $push: 0, $pull: 0, $collapse: true, $float: left);
        }
      }
    }
    .reveal-modal .small &,
    .side-panel-container & {
      padding-right: 0;
      padding-left: 0;
      &:first-child {
        padding-top: 0;
      }
      .section__info {
        @media #{$medium-up} {
          @include vr-spacing(mt, .25);
          width: 100%;
          margin-left: 0 !important;
        }
        @media #{$large-up} {
          @include vr-spacing(mt, .25);
          width: 100%;
          margin-left: 0 !important;
        }
        @media #{$xxlarge-up} {
          @include vr-spacing(mt, .25);
          width: 100%;
          margin-left: 0 !important;
        }
      }
      .section__content {
        margin-top: 0;

        @media #{$medium-up} {
          width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }
        @media #{$large-up} {
          width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }
        @media #{$xlarge-up} {
          width: 100%;
          margin-top: 0;
          margin-left: 0 !important;
        }
      }
    }
    .side-panel-container & {
      display: block;
      @include vr-spacing(pb, 1.25);
      &:last-child {
        border-color: $form-section-border-color;
      }
      .section__info {
        margin-bottom: 0;
        .section__title {
          @extend %h5;
          @include vr-spacing(mb, .75);
          padding: 0 !important;
        }
        .section__description {
          @include vr-spacing(mb, 1);
        }
      }
    }
  }
  .cui-form .side-panel-section {
    border-color: transparent;
  }
}