/* ==========================================================================
   Form.
   ========================================================================== */
form {
  position: relative;
  margin-bottom: var(--space-xl);
  font-family: var(--font-family);

  &:focus {
    outline: 0;
  }
}

.form-group,
.form-wrapper,
.form-item {
  margin-bottom: var(--space-l);
}

/* Fieldset.
   ========================================================================== */
fieldset {
  margin: 1rem 0;
  padding: 0;
  min-width: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}

label,
legend,
.form-group-title {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-family-heading);
}

.fieldset-legend {
  display: contents; /* For Firefox. */
  float: left; /* iOS Safari, Android Chrome, Edge. */
  width: 100%; /* iOS Safari, Android Chrome, Edge. */
  margin-bottom: 1rem;
  color: var(--color-text);
  font-weight: bold;
}

/* Form elements.
   ========================================================================== */
form {
  input,
  select,
  textarea {
    &[disabled],
    &[readonly],
    &:disabled {
      opacity: .5;
      cursor: default;
    }

    &:not([readonly]):focus {
      outline: 0;
      border-color: var(--input-fg-color);
      box-shadow: inset 0 0 0 1px var(--input-fg-color);
    }
  }

  .description {
    font-family: var(--font-family);
  }
}

.form-text,
.form-number,
.form-email,
.form-tel,
.form-select,
.form-search,
.form-textarea {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
  color: var(--input-fg-color);
  font-family: inherit;
  font-size: var(--input-font-size);
  background-color: var(--input-bg-color);
  border: var(--input-border-size) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-sizing: border-box;
  transition: border-color .3s;
  appearance: none;

  &:placeholder {
    color: var(--color-text);
    opacity: 1;
  }

  &.error {
    border-color: var(--color-fg-error);
  }
}

.form-select[multiple] {
  height: auto;
}

.form-textarea {
  height: auto;
  resize: vertical;
}

.js-form-type-radio,
.js-form-type-checkbox {
  display: flex;
  align-items: flex-start;

  .form-item & {
    margin-bottom: 0;
  }

  label {
    display: inline-flex;
    flex-direction: column;
    margin-left: .75em;
    font-family: var(--font-family-heading);
    cursor: pointer;

    .item-title {
      cursor: inherit;
    }
  }

  .form-radio,
  .form-checkbox {
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-gray-400);
    border-radius: 2px;
    background: var(--color-white) no-repeat 50% 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
    background-size: 80%;
    box-shadow: 0 0 0 4px transparent;
    appearance: none;
    cursor: pointer;

    &:active,
    &:hover {
      border-color: var(--color-text-dark);
      box-shadow: inset 0 0 0 1px var(--color-text-dark);
    }
    &:checked {
      border-color: var(--color-fg-primary);
      box-shadow: inset 0 0 0 1px var(--color-fg-primary);
      background-color: var(--color-fg-primary);

      &:hover {
        border-color: var(--color-text-dark);
        box-shadow: inset 0 0 0 1px var(--color-text-dark);
      }
    }
  }

  .form-radio {
    width: 19px;
    height: 19px;
    border-radius: 19px;
  }
}

.js input.form-autocomplete {
  background: none;
}

/* Messages.
   ========================================================================== */
.form-item--error-message {
  padding-top: 4px;
  color: var(--color-fg-error);
  font-style: italic;
  font-size: var(--font-size-s);
}

/* ==========================================================================
   Login.
   ========================================================================== */
.form--login {
  .form-actions {
    padding-top: var(--space-m);
  }

  .form-item-reset {
    margin-top: var(--space-xxl);

    a {
      color: var(--color-text-light);

      &:active,
      &.is-active,
      &:focus,
      &:hover {
        color: var(--color-text);
      }
    }
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Register.
   ========================================================================== */
.form--register {
  .horizontal-tabs {
    border: 0;
  }

  .horizontal-tabs-list {
    display: none;
  }

  .field-group-tab {
    padding: var(--space-l) var(--gutter-l) var(--space-s);
    background: var(--color-bg-secondary);
    border-radius: 10px;
  }

  /* Responsive.
   ========================================================================== */
  @media screen and (min-width: 48em) {
    max-width: 500px;
  }
}

.route--user-register {
  .form--register {
    position: relative;

    .field-group-tabs-wrapper {
      position: relative;
      z-index: 10;
    }

    .form-illustration {
      display: none;
    }

    /* Responsive.
       ========================================================================== */
    @media screen and (min-width: 48em) {
      .form-illustration {
        position: absolute;
        top: 0;
        right: -600px;
        z-index: 5;
        display: inline;
        width: 600px;
      }
    }
  }
}

/* ==========================================================================
   Export dataviz.
   ========================================================================== */
.form--embed,
.form--export-dataviz {
  margin: 0;

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

/* ==========================================================================
   Embed.
   ========================================================================== */
.form--embed {
  display: flex;
  align-items: flex-start;

  .form-content {
    order: -1;
    display: none;
    min-width: 60vw;
  }

  .form-sidebar {
    width: 300px;
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    .form-content {
      display: block;
      padding-right: var(--gutter-l);
    }
  }
}

/* ==========================================================================
   Global search.
   ========================================================================== */
.form--search-global {
  padding: var(--space-l) var(--gutter-l);
  border-bottom: 1px solid var(--color-fg-primary);

  .form-search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-item-keywords {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    --icon-size: var(--icon-size-s);

    &:before {
      content: "";
      display: inline-block;
      width: var(--icon-size);
      height: var(--icon-size);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: var(--icon-size);
      background: var(--color-text-dark);
      mask-image: var(--icon-datagone-search);
    }

    .form-element {
      border: 0;
      background-color: var(--color-bg);

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

  .form-search-close {
    padding: 0;
    height: 42px;

    .icon {
      --icon-size: var(--icon-size-l);

      &:before {
        background-color: var(--color-text-light);
        transition: background-color .2s;
      }

      &:hover,
      &:focus {
        &:before {
          background-color: var(--color-text-dark);
        }
      }
    }
  }

  .form-checkboxes {
    display: flex;

    body:not(.role--authenticated) & {
      display: none;
    }

    .form-item {
      margin: 0 20px 0 0;
    }

    input {
      position: relative;
      top: -1px;
    }
    label {
      margin-bottom: 0;
      font-size: var(--font-size-s);
    }
  }
}

/* ==========================================================================
   Events filters.
   ========================================================================== */
.form--events {
  display: inline-flex;
  align-items: flex-end;

  .form-item-category {
    min-width: 200px;
  }

  .form-submit {
    display: none;
  }
}

/* ==========================================================================
   Comment.
   ========================================================================== */
.form--comment {
  .js-filter-wrapper {
    display: none;
  }
}

.comment-dataviz-delete-form {
  .form-actions {
    margin-top: var(--space-l);

    a {
      display: none;
    }
  }

  .button + button {
    margin-left: 12px;
  }
}

/* ==========================================================================
   Glossary.
   ========================================================================== */
.form--glossary {
  .form-item-filter,
  .form-actions {
    display: none;
  }

  .form-wrapper[data-drupal-selector="edit-alphabet"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 25px;
  }

  .form-item-alphabet {
    .option {
      position: relative;
      margin-left: 0;
      padding: 0 20px;
      transition: .2s;

      &:after {
        content: "";
        position: absolute;
        left: 25%;
        bottom: 0;
        width: 50%;
        height: 1px;
        background: var(--color-fg-primary);
        transform: scaleX(0);
        transform-origin: 100% 50%;
        transition: transform .2s ease-out;
      }
    }

    + .form-item-alphabet {
      .option {
        position: relative;

        &:before {
          content: "";
          position: absolute;
          top: 50%;
          left: -1px;
          z-index: 5;
          transform: translateY(-50%);
          width: 1px;
          height: 18px;
          background: var(--color-border);
        }
      }
    }

    &:not(.form-disabled) {
      .is-checked .option,
      .option:hover,
      .option:focus {
        color: var(--color-text-dark);

        &:after {
          transform: scaleX(1);
          transform-origin: 0 50%;
        }
      }
    }
  }
}

/* ==========================================================================
   Media library.
   ========================================================================== */
.form--media-library {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  margin: 0;

  .form-item-sort-by,
  .form-item-sort-order,
  .form-submit {
    display: none;
  }

  .form-item-thematic {
    width: 386px;
  }

  .form-item-type {
    width: 386px;
  }

  .form-item-secondary {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: var(--space-xl) 0 0;
    padding: var(--space-xl) 0;
    background: var(--color-bg-secondary);

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      z-index: -1;
      width: 1000px;
      height: 100%;
      background: inherit;
    }

    &:before {
      left: -1000px;
    }

    &:after {
      right: -1000px;
    }

    .form-item {
      .customform {
        display: flex;
        align-items: center;
      }
    }

    .form-group-title {
      margin: 0 20px 0 0;
      color: var(--color-text-dark);
    }

    .customform-select-toggle {
      line-height: 27px;
      padding-left: 11px;
      padding-right: 33px;

      &:after {
        right: 11px;
      }
    }

    .form-item-sorting {
      margin-right: var(--gutter-m);
      margin-bottom: 0;
    }

    .form-group-items {
      display: flex;
      align-items: center;
    }

    .form-item-display {
      display: none;
    }

    .form-display-layout {
      margin-right: 18px;
      text-decoration: none;

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

      .icon {
        color: var(--color-text-dark);

        &:before {
          font-size: 30px;
        }
      }

      &.is-disabled {
        opacity: .5;
      }
    }
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    flex-direction: row;
    justify-content: center;

    .form-item-thematic {
      margin-left: 10%;
    }
    .form-item-type {
      margin-left: var(--gutter-m);
      margin-right: var(--gutter-m);
    }

    .form-item-secondary {
      justify-content: flex-end;
      flex-direction: row;

      .form-item-display {
        display: flex;
        align-items: center;
        height: 50%;
        margin: 0;
      }
    }
  }
}