@import "settings.colors";
@import "settings.fonts";

@import "mixins/tools.functions";
@import "mixins/tools.mixins";
@import "mixins/base.controls";
@import "mixins/base.focus";

// --------------------------------------------------
// Fieldsets
// --------------------------------------------------

.c-form__fieldset {
  padding: rem(20) rem(20) 0 rem(20);
}
.c-form__fieldset--radios {
  margin-bottom: rem(20);
}

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

.c-form__label {
  @include control-label;
}
.c-form__control--checkbox,
.c-form__control--radio {
  + .c-form__label {
    @include control-label--inline;
  }
}

// --------------------------------------------------
// Form control wrappers
// --------------------------------------------------

.c-form__field {
  margin-bottom: rem(20);
}
.c-form__field--checkbox .c-form__field-inner,
.c-form__field--radio {
  display: flex;
  align-items: center;
}
.c-form__field--radios {
  margin-bottom: 0;
  .c-form__field--radio {
    margin-bottom: rem(20);
  }
}

// --------------------------------------------------
// Buttons
// --------------------------------------------------

// Use the c-button component (see _components.button.scss)

// --------------------------------------------------
// Text inputs and select boxes
// --------------------------------------------------

.c-form__control--select,
.c-form__control--text,
.c-form__control--textarea {
  @include control-field;
  @include control-field--light-primary;
}
.c-form__control--textarea {
  height: auto;
}

// --------------------------------------------------
// Checkboxes and radio buttons
// --------------------------------------------------

.c-form__control--checkbox,
.c-form__control--radio {
  margin-right: rem(6);
}

// --------------------------------------------------
// Uniform styling for modern browsers
// --------------------------------------------------

// Entering fancy town...

@include modern-browsers {
  .c-form__control {
    // It's only possible to override MacOS Firefox's blue focus glow when
    // "appearance: none" is applied to the form elements. However, doing
    // so blows away the browser/operating system's default styling and
    // leaves us responsible for styling the form controls ourselves
    // (i.e. arrows, checkmarks, etc.). See:
    // https://stackoverflow.com/questions/8199095/chrome-safari-box-shadow-only-appears-on-text-input-if-border-is-specified
    appearance: none;
  }
  .c-form__control--checkbox,
  .c-form__control--radio {
    @include control-box;
    @include control-box--light-primary;
    width: rem(22);
    height: rem(22);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: rem(22); // Shift icon out of view when unchecked
    // Using "auto" for the height is problematic - must specify actual height
    background-size: rem(22) rem(44);
    &:focus,
    &:hover:focus {
      @include focus-outline;
    }
    &:checked {
      background-position-y: -1px;
    }
  }
  .c-form__control--checkbox {
    background-image: image-url("checkmark.svg");
  }
  .c-form__control--radio {
    background-image: image-url("radio-button-dot.svg");
    border-radius: 50%;
  }
  .c-form__control--select {
    padding-right: rem(54);
    background-image: image-url("select-box-arrow.svg");
    background-repeat: no-repeat;
    background-position: top right;
    // Using "auto" for the height is problematic - must specify actual height
    background-size: rem(44) rem(88);
  }
}

// --------------------------------------------------
// Success
// --------------------------------------------------

.c-form__field--success {
  .c-form__control--select,
  .c-form__control--text,
  .c-form__control--textarea {
    @include control-field--light-primary("success");
  }
  @include modern-browsers {
    .c-form__control--checkbox,
    .c-form__control--radio {
      @include control-field--light-primary("success");
    }
  }
}

// --------------------------------------------------
// Errors
// --------------------------------------------------

.c-form__global-error,
.c-form__error {
  color: $color-utility-red-700;
  font-family: $font-utility-stack;
  font-size: rem(14);
  line-height: line-height(14, 18);
}
.c-form__global-error {
  margin-bottom: rem(20);
}
.c-form__error {
  margin-bottom: 0;
}
.c-form__field--error {
  .c-form__control--select,
  .c-form__control--text,
  .c-form__control--textarea {
    @include control-field--light-primary("error");
  }
  @include modern-browsers {
    .c-form__control--checkbox,
    .c-form__control--radio {
      @include control-field--light-primary("error");
    }
  }
}
.c-form__field--checkbox,
.c-form__field--radio {
  &.c-form__field--error .c-form__error {
    width: 100%; // Necessary because parent has flex-wrap: wrap
  }
}
.c-form__fieldset--radios .c-form__error {
  margin-bottom: rem(20);
}

// --------------------------------------------------
// Disabled
// --------------------------------------------------

.c-form__field {
  .c-form__control--select,
  .c-form__control--text,
  .c-form__control--textarea {
    &:disabled {
      @include control-field--light-primary("disabled");
    }
  }
  @include modern-browsers {
    .c-form__control--checkbox,
    .c-form__control--radio {
      &:disabled {
        @include control-field--light-primary("disabled");
      }
    }
  }
}

// --------------------------------------------------
// Dark theme
// --------------------------------------------------

.c-form--dark {

  :focus,
  :hover:focus {
    @include focus-outline-inverted;
  }

  // -------------------------
  // Labels and legends
  // -------------------------

  .c-form__label,
  .c-form__legend {
    color: $color-white;
  }

  // -------------------------
  // Text inputs and select boxes
  // -------------------------

  .c-form__control--select,
  .c-form__control--text,
  .c-form__control--textarea {
    @include control-field--dark-primary;
  }

  // -------------------------
  // Uniform styling for modern browsers
  // -------------------------

  // Returning to fancy town...

  @include modern-browsers {
    .c-form__control--checkbox,
    .c-form__control--radio {
      @include control-box--dark-primary;
      &:checked {
        // -1px extra pixel to get it centred with a border on the radio/checkbox
        background-position-y: rem(-23);
      }
    }
    .c-form__control--select {
      background-position-y: rem(-44);
    }
  }

  // -------------------------
  // Success
  // -------------------------
  .c-form__field--success {
    .c-form__control--select,
    .c-form__control--text,
    .c-form__control--textarea {
      @include control-field--dark-primary("success");
    }
    @include modern-browsers {
      .c-form__control--checkbox,
      .c-form__control--radio {
        @include control-field--dark-primary("success");
      }
    }
  }

  // -------------------------
  // Errors
  // -------------------------
  .c-form__global-error,
  .c-form__error {
    color: $color-utility-red-200;
  }
  .c-form__field--error {
    .c-form__control--select,
    .c-form__control--text,
    .c-form__control--textarea {
      @include control-field--dark-primary("error");
    }
    @include modern-browsers {
      .c-form__control--checkbox,
      .c-form__control--radio {
        @include control-field--dark-primary("error");
      }
    }
  }

  // --------------------------------------------------
  // Disabled
  // --------------------------------------------------

  .c-form__field {
    .c-form__control--select,
    .c-form__control--text,
    .c-form__control--textarea {
      &:disabled {
        @include control-field--dark-primary("disabled");
      }
    }
    @include modern-browsers {
      .c-form__control--checkbox,
      .c-form__control--radio {
        &:disabled {
          @include control-field--dark-primary("disabled");
        }
      }
    }
  }

}
