@import 'settings';

// Form elements
//
// All form elements are grouped in a class `.form-group`.
// There can be a label, required astrix, input field and help text.
//
// markup: form-element.twig
//
// Weight: 1
//
// Style guide: molecules.form-elements

// Inline Form errors
//
// _Added in release 1.6_
//
// For this feature the module __Inline Form Errors__ should be enabled.
//
// ### Alerts
// When a form is submitted the user receives an alert message with
// either a confirmation the form is submitted successfully or with the feedback
// that there is an error. The feedback will then contain a link to the inline form feedback.
//
// ### Inline feedback
// The form-group div will get a class `has-error` which can be used
// to style any form element (children). The feedback is placed in a small dismissable alert.
// All the other fields remain in there original form.
//
// markup: inline-form-error.twig
//
// Weight: 3
//
// Style guide: molecules.form-elements.inline-error

// Form element icons
//
// To add icons to a form element, you can add it inside the `<label>` element.
// The icon can be used to make labels and elements easily recognisable or categorise
// form elements. Wrap the icon in span with the class `control-label__icon` where you
// can add a background-image or inline SVG.
//
// markup: form-element-icon.twig
//
// Weight: 2
//
// Style guide: molecules.form-elements.icon

// Browsers do not recognize pseudo :after selectors, we must create a wrapper
// around the select element to style it properly.

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
  margin-bottom: .5rem;
}

.control-label {
  font-size: 0.875rem;
}

.control-label__icon--bg {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px 24px;
}

.control-label__icon--svg {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  padding: 3px;
  fill: $default-color;
}

.control-label--above {
  display: block;
  margin-bottom: 3px;
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: 1.5rem;
  position: relative;

  .radio,
  .checkbox {
    margin-bottom: 0;
  }

}

.form-group-inline {
  display: flex;
  flex-wrap: wrap;

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

  .form-item {
    flex: 1;
  }

  .btn {
    margin-left: 8px;
    margin-bottom: 5px;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: 8px;
    }

    // Safari fix
    flex-shrink: 0;
  }

}

.form-group-inline--right {
  justify-content: flex-end;

  // This class identifies the primary button set by Drupal, is has nothing to do with the button style. We want this button to be positioned last.
  .button--primary {
    order: 10;
  }
}

.form-no-label label + .form-required {
  display: none;
}

// Nested checkboxes are indented to show that they belong together.
.form-group.checkboxes--nested {
  outline: red;

  & > .form-checkboxes,
  & > .form-group {
    margin-left: 25px;
    margin-bottom: .5em;
  }

  .checkboxes__label {
    margin-bottom: 0;
  }
}

// In the search filter they do not appear in a form-group.
.checkboxes--nested .checkboxes--nested__child + label {
  margin-left: 25px;
}

// Indication on labels for required fields
span.form-required {
  margin: 0 3px;
}

// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.help-block {
  display: block; // account for any element using help-block
  margin-top: 5px;
  font-size: 0.75rem;
  color: $help-block;

  .radio & {
    max-width: none;
    margin-top: 0;
  }

  > a {
    font-weight: 700;
  }

}

.form-actions .btn {
  margin-bottom: 5px;
}

// Views exposed forms are placed next to views. An example is a filter block
// in overviews. We want to make sure the buttons in this forms have a consistent
// layout

.views-exposed-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0;

  // The primary button will align right
  .btn-default {
    order: 10;
  }

  // the flat button (reset button) will align left
  .btn-flat {
    margin-left: 0;
  }
}

// For forms that cover the whole page, we can assume the primary button should align right
.form--default .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .btn-group--primary,
  .btn-primary {
    margin-left: auto;
    margin-right: 0;
    order: 10;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: auto;
    }
  }
}

// Inline Form Errors

.form-item--error-message {
  margin-top: 10px;
  position: relative;
  font-size: 0.75rem;
  display: inline-block;
  margin-bottom: 5px;
  padding-right: 3 * $alert-padding-x-sm;

  .close {
    float: none;
    position: absolute;
    right: 0;
    line-height: 16px;
    padding: $alert-padding-y-sm $alert-padding-x-sm;
  }

  &::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: 20px;
    top: -7px;
    border-bottom: 8px dashed;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
  }
}

.fieldset-wrapper .form-item--error-message {
  margin-top: 0;
}

.form-inline {
  @include for-tablet-portrait-up {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

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

    .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;
    }

  }

  .has-error & {
    margin-bottom: 0;
  }
}

.field--label-inline {
  .field--label {
    font-weight: 500;
    display: inline-block;
    &:after {
      content: ':';
    }
    & + .field--item {
      display: inline-block;
      a {
        font-weight: 400;
      }
    }
  }
}

// The time zone block on the event edit pages
#edit-timezone-indication {
  .node-event-form &,
  .node-event-edit-form & {
    .btn {
      cursor: auto;
    }
  }
}

// Fieldset and fieldset elemenets styles.
fieldset.card {
  legend.card__title {
    width: 100%;
    top: 1.5rem;
    margin-bottom: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
}

legend.control-label {
  margin-bottom: 5px;
}

.form-wrapper {
  .card__block {
    padding-bottom: 1rem;
  }
}

details {
  summary {
    position: relative;

    svg.icon-summary-arrow {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 1.25rem;
      margin-right: 0;
      top: .75rem;

      [dir='rtl'] & {
        right: auto;
        left: 1.25rem;
      }
    }

    &,
    &.btn {
      &:focus {
        outline: $default-outline solid 2px;
      }
    }
  }

  &[open] {
    summary {
      border-bottom: 1px solid $gray-lighter;

      svg.icon-summary-arrow {
        transform: rotate(180deg);
      }
    }
  }
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus {
    font-size: 1rem;
  }
}

// User login form.
.social-user-login-form {
  > .form-item > .card__block {
    > .form-item + .help-block {
      margin-top: calc(-1.5rem + 5px);
    }

    > .help-block {
      margin-bottom: 1.5rem;
    }
  }
}

// Links styles on the user forms.
.social-user-login-form,
.social-user-password-form,
.user-register-form {
  a {
    text-decoration: underline;
    text-decoration-color: var(--link-color);

    &:hover,
    &:focus {
      color: var(--link-color);
    }
  }
}
