/* ==========================================================================
   Config
   ========================================================================== */
$form-checkbox-margin: $layout-spacing-base*0.5 !default;
$form-checkbox-font-weight: $typo-weight-roman !default;
$form-checkbox-label-size: $typo-size-lead !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-form {
  display: flex;
  flex-direction: column;

  input:not([type="checkbox"], [type="radio"]),
  textarea {
    width: 100%;
    margin: 0 0 $layout-spacing-base*0.5;
  }
}

.gui-form__footer {
  display: flex;
  justify-content: flex-end;
}

.gui-form__choice-element-wrapper {
  margin: $form-checkbox-label-size*0.5;
  display: flex;
  align-items: baseline;
}

.gui-form-checkbox__label,
.gui-form-checkbox__label--button {
  cursor: pointer;
  margin-left: $form-checkbox-margin;
  font-weight: $form-checkbox-font-weight;
  font-size: $form-checkbox-label-size;
  display: block;

  &.gui-is-disabled {
    cursor: default;
  }
}

.gui-form-checkbox__label--button {
  cursor: default;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;

  &:focus {
    outline: none;
  }

  &.gui-is-highlight {
    cursor: pointer;
  }
}

.gui-form-input__text {
  &.gui-is-highlight {
    border-bottom: 2px solid $primary-yellow-lighter;

    &:hover,
    &.gui-is-active,
    .gui-hover &,
    &--active {
      background: $primary-yellow-lighter;
    }
  }
}

.gui-form-checkbox__subtitle {
  display: block;
  font-size: $typo-size-small;
  color: $color-text-light;
}

.gui-form-checkbox__input,
.gui-form-radio__input  {
  cursor: pointer;
}

.gui-form__choice-element-wrapper .gui-form-radiobutton__other {
  margin-left: $form-checkbox-margin;
  border: none;
  outline: none;
  font-size: $form-checkbox-label-size;
  padding: 0;
  background-color: transparent;
}

.gui-form-radiobutton--invisible {
  visibility: hidden;
}

form .gui-dropdown-gc .gui-button--outline,
.gui-form__input {
  border: 1px solid lighten($neutral-base, 20%);
  border-radius: 4px;
  padding: $layout-spacing-base*0.5;
  transition: $animation-time-micro border-color $animation-curve;
  color: $neutral-dark;
  font-size: $typo-size-base;
  line-height: $typo-line-height-base;

  &:hover {
    border-color: $neutral-base;
    color: $neutral-dark;
  }

  &:focus {
    border-width: 2px;
    border-color: $primary-blue;
    padding: $layout-spacing-base*0.5 - 1;
    outline: none;
  }
}

/* ==========================================================================
   Modifiers
   ========================================================================== */
.gui-form-checkbox__label--hinted {
  color: $primary-purple;
}

.gui-form-checkbox__label--other-option {
  color: $primary-blue;
}

.gui-form__input--noborder,
.gui-form__input--noborder:focus {
  padding: $layout-spacing-base*0.5;
  background: transparent;
  border: none;
  font-size: inherit;
}

.gui-form__input--collapse,
.gui-form__input--collapse:focus {
  padding: 0;
}

.gui-form__input--full-width {
  width: 100%;
}

.gui-form__input--padding-small {
  padding: $layout-spacing-base*0.25;

  &:focus {
    padding: $layout-spacing-base*0.25 - 1;
  }
}

.gui-form-group {
  margin-top: $layout-spacing-base*0.5;
}

.gui-form--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.gui-form__input.gui-form__input--has-error {
  border-color: $primary-red;
  border-width: 2px;
  padding: $layout-spacing-base*0.5 - 1;
}

input.gui-form__input--display-error {
  margin-bottom: 0;
}

.gui-form-input__error-message {
  color: $primary-red;
  font-size: $typo-size-slight;
  display: block;
  margin-top: $layout-spacing-base*0.25;
}

.gui-form__input,
form textarea,
form .gui-dropdown-gc .gui-button--outline {
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: white;
  }
}