@import "../variables";

@import "bootstrap/mixins/vendor-prefixes";
@import "../mixins/forms";

/**
 * Basic form styling.
 */

label {
  font-size: $font-size-large;
  margin-bottom: 10px;

  .input-optional {
    font-weight: normal;
    font-size: $font-size;
  }
}

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

.help-block {
  color: $text-color;
  margin-top: 0;
  margin-bottom: 5px;
}

.form-control {
  @extend .form-control;

  padding: 7px 12px 5px;
  border-width: 2px;
  box-shadow: none;
  font-size: $font-size-large;
  @include transition(border-color 100ms linear);

  &:focus {
    box-shadow: none;
  }
}

/**
 * Input groups.
 */

.cr-input-group {
  @extend .input-group;

  background: $input-bg;
  border: 2px solid $input-border;
  border-radius: $input-border-radius;
  @include transition(border-color 100ms linear);

  &.cr-input-group--primary {
    border-color: $brand-primary;
  }

  &.cr-input-group--masthead {
    border-color: $brand-gray-light;
  }

  &.cr-input-group--focused {
    border-color: $input-border-focus;
  }

  .cr-input-group__input {
    border: 0;
    background: transparent;
    height: $input-height-base - 4;
  }

  .cr-input-group__button {
    @extend .input-group-btn;

    .btn {
      padding: 6px 12px;
    }
  }

  .cr-input-group__icon {
    font-size: $font-size-large;
  }

}

/**
 * Input groups sizing, we need to redefine as we've altered the names of
 * components, so the original Bootstrap definitions won't @extend over.
 */

.cr-input-group--lg > .cr-input-group__input,
.cr-input-group--lg > .cr-input-group__addon,
.cr-input-group--lg > .cr-input-group__button > .btn {
  @extend .input-lg;
}

.cr-input-group--sm > .cr-input-group__input,
.cr-input-group--sm > .cr-input-group__addon,
.cr-input-group--sm > .cr-input-group__button > .btn {
  @extend .input-sm;
}

.cr-input-group--lg {
  .cr-input-group__input {
    height: $input-height-large - 4;
    padding: 11px 16px 9px;
    font-size: ceil(($font-size-large * 1.25));
    line-height: $line-height-large;
  }

  .cr-input-group__button > .btn {
    height: $input-height-large - 4;
    font-size: ceil(($font-size-large * 1.25));
  }

  .cr-input-group__icon {
    font-size: ceil(($font-size-large * 1.25));
  }
}

.cr-input-group--sm {
  .cr-input-group__input {
    height: $input-height-small - 4;
    font-size: ceil(($font-size-large * 0.85));
    line-height: $line-height-small;
  }

  .cr-input-group__button > .btn {
    height: $input-height-small - 4;
  }

  .cr-input-group__icon {
    font-size: ceil(($font-size-large * 0.85));
  }
}

/**
 * Radio buttons and Checkboxes
 */

.radio,
.checkbox {
  @extend .form-control;

  height: auto;
  min-height: 40px;

  label {
    width: 100%;
    height: 100%;
    margin-top: 1px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin-top: 3px;
  }
}

.radio-selected,
.checkbox-selected {
  border: 2px solid $brand-primary;

  label {
    font-weight: bold;
  }
}

/**
 * Validation messages.
 */

.error {
  color: $text-color-error;

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

@media (min-width: $screen-sm-min) {
  .col-sm-4 .error {
    width: 300%;

    &.form-control {
      width: 100%;
    }
  }

  .col-sm-8 .error {
    width: 150%;

    &.form-control {
      width: 100%;
    }
  }

  .col-sm-4,
  .col-sm-8 {
    .form-checkbox.error,
    .form-radio.error {
      width: $font-size;
    }
  }
}

.cr-form-page {
  .page-header {
    @extend .panel;
    @extend .panel-body;
    @extend .panel-default;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center;
  }
}

/* Bootstrap/drupal uses panels for fieldsets which have some interesting side effects. So, for all panel-headings in
 * forms, we want to ensure that panelyness is not in effect
 */
form .panel-heading {
  border: 0;
  margin-bottom: 0;
}

$feedback-icon-width: 20px;
$feedback-icon-height: $feedback-icon-width;
$feedback-bar-height: 3px;
$feedback-ball-border: 3px;

@include make-form-control-feedback-adjustment();

.cr-i.form-control-feedback {
  font-size: 13px;

  &::before {
    position: relative;
    top: 15px;
    color: $WHITE;
  }

  &::after {
    display: inline-block;
    content: "";
    width: $feedback-icon-width;
    height: $feedback-icon-height;
    border: $feedback-icon-width / 2 solid $brand-tertiary;
    border-radius: $feedback-icon-width / 2;
    position: absolute;
    top: $feedback-icon-width / 2 + 1;
    left: $feedback-icon-width / 2;
    z-index: -1;
  }
}

.form-type-date-fields .cr-i.form-control-feedback {
  right: -1.6em;

  @media (max-width: $screen-sm) {
    right: $font-size;
    top: -2.5rem;
  }
}

/**
 * Bouncy ball input feedback style.
 */
.cr-has-feedback {
  position: relative;
  display: block;

  &::after {
    display: block;
    position: absolute;
    bottom: 2px;
    right: 13px;
    width: 13px;
    height: 13px;
    overflow: hidden;
    content: "";
    background-color: $brand-primary;
    border-radius: 50%;
    animation: cruk-input-bounce 0.75s ease-in-out infinite, cruk-brand 2.25s step-end infinite;
    transition: opacity 0.2s ease-in;
    opacity: 0;
  }
}

.cr-has-feedback--active::after {
  opacity: 1;
}

/*
 * Fundraise step progress bar and page header.
 * @TODO: This doesn't belong here. What's a ".webform-client-form"?
 */
.webform-client-form div {
  .progress-bar-fieldset {
    margin-bottom: 0;
    border-style: solid solid none;
    border-width: 0 1px;
    border-radius: 0;
    padding-top: 5px;

    .col-sm-6.col-sm-offset-3 {
      margin-left: 0;
      width: 100%;
    }
  }

  .webform-component-fieldset {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

section.col-sm-12 .page-header {
  background-color: $WHITE;
  margin-bottom: 0;
  border: 1px solid $brand-gray-light;
  border-bottom: 0 none;
  text-align: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-top: 15px;
}