/*
*
* Form styles
* --------------------------------------------------
*/

//== Forms variables
//
$input-height: 50px;
$input-lg-height: 60px;
$input-sm-height: 40px;

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$border-radius-base:        4px !default;

$text-color:              $gray-base;

$input-color: $gray;
$input-color-placeholder: $input-color;

$input-bg: #fff;
$input-border: $input-bg;
$input-border-radius: $border-radius-base;

$input-font-size: 14px;
$input-line-height: 24px;
$input-font-weight: 400;

$error-color: #f5543f;
$success-color: #98bf44;

$input-border-obj: 1px solid $input-border;
$input-padding-horizontal: 19px;
$input-line-height: round($input-font-size * 1.7);

$input-padding-vertical: round(($input-height - $input-line-height) / 2) + 1px;
$input-padding: $input-padding-vertical $input-padding-horizontal;

@if ($input-border-obj != none) {
  $input-padding-vertical: round(($input-height - $input-line-height - (nth($input-border-obj, 1) * 2)) / 2);
  $input-padding: $input-padding-vertical $input-padding-horizontal;
}

$textarea-default-height:       135px;
$textarea-default-min-height:   $input-height;
$textarea-default-max-height:   round($textarea-default-height * 1.7);


//
// Form styles
// --------------------------------------------------

.rd-mailform {
  position: relative;
  text-align: left;

  .button {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: $input-height;
  }
}

input:-webkit-autofill ~ label,
input:-webkit-autofill ~ .form-validation {
  color: $gray-base !important;
}

.form-label,
.form-label-outside {
  margin-bottom: 0;
  color: $text-color;
  font-weight: $input-font-weight;
}

.form-input {
  display: block;
  width: 100%;
  min-height: $input-height;
  padding: $input-padding-vertical $input-padding-horizontal;
  font-size: $input-font-size;
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  color: $input-color;
  background-color: transparent;
  background-image: none;
  border-radius: $input-border-radius;
  -webkit-appearance: none;
  transition: .3s ease-in-out;

  @if ($input-border-obj) {
    border: $input-border-obj;
  }

  &:focus {
    outline: 0;
  }
}

textarea.form-input {
  height: $textarea-default-height;
  min-height: $textarea-default-min-height;
  max-height: $textarea-default-max-height;
  resize: vertical;
}

// Form wrapper
// -------------------------

.form-wrap {
  position: relative;

  .button {
    width: 100%;
  }

  &.has-error {
    .form-input {
      border-color: $error-color;
    }
  }

  &.has-focus {
    .form-input {
      border-color: $primary;
    }
  }
}

.form-wrap + * {
  margin-top: 20px;
}

// Form labels
// -------------------------

.form-label {
  position: absolute;
  top: $input-height / 2;
  left: 0;
  right: 0;
  padding-left: $input-padding-horizontal;
  padding-right: $input-padding-horizontal;
  font-size: $input-font-size;
  font-weight: $input-font-weight;
  line-height: $input-line-height;
  pointer-events: none;
  text-align: left;
  z-index: 9;
  transition: .25s;
  will-change: transform;
  transform: translateY(-50%);

  &.focus {
    opacity: 0;
  }

  &.auto-fill {
    color: $input-color;
  }
}

[data-x-mode='true'] {
  .form-label {
    pointer-events: auto;
  }
}

.form-label-outside {
  width: 100%;
  margin-bottom: 4px;
  letter-spacing: .1em;
  text-transform: uppercase;

  @media (min-width: $screen-sm-min) {
    position: static;

    &,
    &.focus,
    &.auto-fill {
      transform: none;
    }
  }
}

// Form validation
// -------------------------

.form-validation {
  position: absolute;
  right: 8px;
  top: 0;
  z-index: 11;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0;
  color: $error-color;
  transition: .3s;
}

.form-validation-left {
  .form-validation {
    right: auto;
    top: 100%;
    left: 0;
  }
}

// Form output
// -------------------------

#form-output-global {
  position: fixed;
  bottom: 30px;
  left: 15px;
  visibility: hidden;
  transform: translateX(-500px);
  transition: .3s all ease;
  z-index: 9999999;

  &.active {
    transform: translateX(0);
    visibility: visible;
  }

  @media (min-width: $screen-xs) {
    left: 30px;
  }
}

.form-output {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 2px;
  transition: .3s;
  opacity: 0;
  visibility: hidden;

  &.active {
    opacity: 1;
    visibility: visible;
  }

  &.error {
    color: $error-color;
  }

  &.success {
    color: $success-color;
  }
}

// Radio and Checkbox Custom
// -------------------------

// Base Styles
//
.radio .radio-custom,
.radio-inline .radio-custom,
.checkbox .checkbox-custom,
.checkbox-inline .checkbox-custom {
  opacity: 0;

  &, &-dummy {
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    outline: none;
    cursor: pointer;
  }

  &-dummy {
    pointer-events: none;
    background: $white;

    &:after {
      position: absolute;
      opacity: 0;
      transition: .22s;
    }
  }

  &:focus {
    outline: none;
  }
}

.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
  input {
    position: absolute;
    left: -100vw;
    top: -100vh;
    float: left;
    visibility: hidden;
    opacity: 0;
  }
}

.radio-custom:checked + .radio-custom-dummy:after,
.checkbox-custom:checked + .checkbox-custom-dummy:after {
  opacity: 1;
}

// Custom Radio Styles
//
.radio,
.radio-inline {
  padding-left: 28px;
  
  .radio-custom-dummy {
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid $gray-light;

    &::after {
      content: '';
      top: 3px;
      right: 3px;
      bottom: 3px;
      left: 3px;
      background: $gray-dark;
      border-radius: inherit;
    }
  }
}

// Custom Checkbox Styles
//
.checkbox,
.checkbox-inline {
  padding-left: 28px;
  
  .checkbox-custom-dummy {
    left: 0;
    width: 18px;
    height: 18px; 
    margin: 0;
    border: 1px solid $gray-light;

    &::after {
      content: '\f222';
      font-family: 'Material Design Icons';
      position: absolute;
      top: -1px;
      left: -2px;
      font-size: 20px;
      line-height: 18px;
      color: $gray-darker;
    }
  }
}

// Checkbox-Toggle
.toggle-custom {
  padding-left: 60px;
  -webkit-appearance: none;

  &:checked ~ .checkbox-custom-dummy {
    &::after {
      background: $primary;
      transform: translate(20px, -50%);
    }
  }
  
  & ~ .checkbox-custom-dummy {
    $toggle-height: 20px;

    position: relative;
    display: inline-block;
    margin-top: -1px;
    width: 44px;
    height: $toggle-height;
    background: $input-bg;
    cursor: pointer;

    &::after {
      content: '';
      position: absolute;
      display: inline-block;
      width: $toggle-height - 4px;
      height: $toggle-height - 4px;
      left: 0;
      top: 50%;
      background: $gray-light;
      transform: translate(4px, -50%);
      opacity: 1;
      transition: .22s;
    }
  }
}



// Form wrap with recaptca
.form-wrap.form-wrap-recaptcha {
  .form-validation {
    top: 3px;
    left: 14px;
  }

  @media (max-width: $screen-xs-min - 1px) {
    .recaptcha {
      > * {
        transform: scale(.96);
        transform-origin: 0 50%;
      }
    }
  }
}

.form-inline {
  $spacingX: 8px;
  $spacingY: 8px;
  
  @include display-flex;
  @include flex-direction(row);
  @include flex-wrap(wrap);
  @include align-items(stretch);
  text-align: center;
  margin-left: - round($spacingX / 2);
  margin-right: - round($spacingX / 2);
  margin-bottom: -$spacingY;

  > * {
    margin-top: 0;
    margin-bottom: $spacingY;
    padding-left: round($spacingX / 2);
    padding-right: round($spacingX / 2);
  }

  .form-wrap {
    @include flex(1);
    min-width: 185px;
  }

  .form-wrap-select {
    text-align: left;
  }

  .form-button {
    @include flex-direction(row);
    @include align-items(stretch);
    @include flex-shrink(0);
    @include flex-grow(0);
    max-width: calc(100% - 10px);
    min-height: $input-height;

    .button {
      min-height: inherit;
    }
  }
  
  @media (min-width: $screen-xs-min) {
    .button {
      display: block;
    }
  }
  
  &.form-inline-centered {
    @include justify-content(center);
  }
}

/**
* Form Small
*/
.form-sm {
  .form-input,
  .button {
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: $input-sm-height;
  }

  .form-validation {
    top: -16px;
  }

  .form-label {
    top: $input-sm-height / 2;
  }
 
  * + .button { margin-top: 10px; }
}

/**
* Form Large
*/
.form-lg {  
  .form-input,
  .form-label,
  .select2-container .select2-choice {
    font-size: 16px;
  }
  
  .form-input,
  .select2-container .select2-choice {
    font-size: 16px;
    padding-top: round(($input-lg-height - $input-line-height) / 2) - 1px;
    padding-bottom: round(($input-lg-height - $input-line-height) / 2) - 1px;
  }

  .form-input,
  .select2-container .select2-choice {
    min-height: $input-lg-height - 2px;
  }

  .form-button {
    min-height: $input-lg-height;
  }

  .form-label {
    top: round($input-lg-height / 2);
  }
}


* + .rd-form { margin-top: 20px; }