/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- el-form-manager */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- layout */

  --bh-form-manager-column-gap: 10px;
  --bh-form-manager-row-gap: 20px;
  --bh-form-manager-fieldblock-margin: 30px;

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- label */

  --bh-form-manager-input-label-font-family: 'Work Sans', sans-serif;
  --bh-form-manager-input-label-font-weight: var(--font-weight-s);
  --bh-form-manager-input-label-font-size: 18px;
  --bh-form-manager-input-label-color: #000000;

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- input */

  --bh-form-manager-highlight-color: #D8512F;

  --bh-form-manager-input-outline: 0;
  --bh-form-manager-input-outline-focused: 0;
  --bh-form-manager-input-outline-invalid: 0;

  --bh-form-manager-input-border: 1px solid rgba(0, 0, 0, 0.12);
  --bh-form-manager-input-border-radius: 5px;
  --bh-form-manager-input-padding: 1rem;
  --bh-form-manager-input-padding-block: 0.5rem;
  --bh-form-manager-input-font-family: 'Work Sans', sans-serif;
  --bh-form-manager-input-font-size: 18px;
  --bh-form-manager-input-placeholder-font-size: var(--bh-form-manager-input-font-size);
  --bh-form-manager-input-text: #000000;
  --bh-form-manager-input-bg: #ffffff;
  --bh-form-manager-placeholder-text: #757575;
  --bh-form-manager-textarea-height: 10rem;

  --bh-form-manager-input-border-focused: 1px solid #757575;
  --bh-form-manager-input-border-filled: var(--bh-form-manager-input-border-focused);
  --bh-form-manager-input-text-focused: var(--bh-form-manager-input-text);
  --bh-form-manager-input-bg-focused: var(--bh-form-manager-input-bg);

  --bh-form-manager-input-border-invalid: var(--border-highlight);
  --bh-form-manager-input-text-invalid: var(--color-text-highlight);
  --bh-form-manager-placeholder-text-invalid: color-mix(
    in srgb,
    var(--bh-form-manager-input-text-invalid),
    transparent 50%
  );
  --bh-form-manager-input-bg-invalid: var(--bh-form-manager-input-bg);

  --bh-form-manager-input-icon-size: 21px;
  --bh-form-manager-input-icon-color: var(--bh-form-manager-highlight-color);
  --bh-form-manager-input-icon-color-invalid: var(--bh-form-manager-input-text-invalid);

  /* !- checkbox */

  --bh-form-manager-checkbox-outline: var(--bh-form-manager-input-outline-focused);
  --bh-form-manager-checkbox-outline-offset: 0;

  --bh-form-manager-checkbox-border: var(--bh-form-manager-input-border);
  --bh-form-manager-checkbox-bg: transparent;
  --bh-form-manager-checkbox-bg-checked: var(--bh-form-manager-highlight-color);

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- submit */

  /* same look as a.buttonorange in css/design.css */
  --bh-form-manager-submit-border: 0 solid transparent;
  --bh-form-manager-submit-border-radius: 28px;
  --bh-form-manager-submit-padding: 0 2rem;
  --bh-form-manager-submit-height: 55px;
  --bh-form-manager-submit-min-width: 260px;
  --bh-form-manager-submit-font-family: 'Work Sans', sans-serif;
  --bh-form-manager-submit-font-weight: 600;
  --bh-form-manager-submit-font-size: 16px;
  --bh-form-manager-submit-letter-spacing: 0.05em;
  --bh-form-manager-submit-text: #ffffff;
  --bh-form-manager-submit-bg: #D8512F;

  --bh-form-manager-submit-hover-border: var(--bh-form-manager-submit-border);
  --bh-form-manager-submit-hover-border-radius: var(--bh-form-manager-submit-border-radius);
  --bh-form-manager-submit-hover-padding: var(--bh-form-manager-submit-padding);
  --bh-form-manager-submit-hover-font-family: var(--bh-form-manager-submit-font-family);
  --bh-form-manager-submit-hover-font-size: var(--bh-form-manager-submit-font-size);
  --bh-form-manager-submit-hover-text: var(--bh-form-manager-submit-text);
  --bh-form-manager-submit-hover-bg: #c2441f;
  --bh-form-manager-submit-hover-transition: all 0.3s ease;
}

.el-form-manager.bhElement {
  /* center the whole form when a width is set in the element settings */
  margin-left: auto;
  margin-right: auto;
}

.el-form-manager {
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- spacer */

  .bh-form-manager__spacer--s {
    height: 20px;
  }

  .bh-form-manager__spacer--m {
    height: 40px;
  }

  .bh-form-manager__spacer--l {
    height: 60px;
  }

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* !- overrides */

  /* classes doubled to out-specify the extension's own styles without `!important` */

  /* !- label */

  .bh-form-manager__label:not(.bh-form-manager__checkbox__label) {
    margin-bottom: 0.5rem;
  }

  .bh-form-manager__label.bh-form-manager__label,
  .bhe-state-current-editing-element .bh-form-manager__label.bh-form-manager__label {
    font-family: var(--bh-form-manager-input-label-font-family);
    font-style: var(--font-style-main);
    font-weight: var(--bh-form-manager-input-label-font-weight);
    font-size: var(--bh-form-manager-input-label-font-size);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-l);
  }

  /* !- input */

  :is(
    .bh-form-manager__field__input.bh-form-manager__field__input,
    .bh-form-manager__field__placeholder.bh-form-manager__field__placeholder
  ),
  .bhe-state-current-editing-element
    :is(
      .bh-form-manager__field__input.bh-form-manager__field__input,
      .bh-form-manager__field__placeholder.bh-form-manager__field__placeholder
    ) {
    font-family: var(--bh-form-manager-input-font-family);
    font-style: var(--font-style-main);
    font-weight: var(--font-weight-m);
    font-size: var(--bh-form-manager-input-font-size);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-m);
    padding-top: var(--bh-form-manager-input-padding-block);
    padding-bottom: var(--bh-form-manager-input-padding-block);
  }

  /* active + filled state: primary color border */
  /* only real inputs with a placeholder — the editor's --property span and selects would otherwise always match */
  :is(input, textarea).bh-form-manager__field__input[placeholder]:not([placeholder='']):not(:placeholder-shown) {
    border: var(--bh-form-manager-input-border-filled);
  }

  :is(.bh-form-manager__field__input, .bh-form-manager__field__placeholder):is(:focus, :focus-visible) {
    border: var(--bh-form-manager-input-border-focused);
  }

  .bh-form-manager__field:has(.bh-form-manager__field__icon)
    :is(.bh-form-manager__field__input, .bh-form-manager__field__placeholder),
  .bh-form-manager__field:has(.bh-form-manager__field__icon)
    :is(.bh-form-manager__field__input, .bh-form-manager__field__placeholder):focus,
  .bh-form-manager__field:has(.bh-form-manager__field__icon)
    :is(.bh-form-manager__field__input, .bh-form-manager__field__placeholder):focus-visible {
    padding-right: calc(var(--bh-form-manager-input-padding) * 2 + var(--bh-form-manager-input-icon-size));
  }

  .bh-form-manager__field__icon {
    right: var(--bh-form-manager-input-padding);
    width: var(--bh-form-manager-input-icon-size);
  }

  /* !- submit */

  .bh-form-manager__fieldblock:has(.bh-form-manager__submit),
  .bh-form-manager__item:has(.bh-form-manager__submit) {
    margin-bottom: 0;
  }

  .bh-form-manager__submit {
    text-align: center;
  }

  .bh-form-manager__submit__input.bh-form-manager__submit__input,
  .bhe-state-current-editing-element .bh-form-manager__submit__input.bh-form-manager__submit__input {
    /* no `display` here: the extension toggles the editor span / real input via display */
    width: auto;
    min-width: var(--bh-form-manager-submit-min-width);
    height: var(--bh-form-manager-submit-height);
    border: var(--bh-form-manager-submit-border);
    border-radius: var(--bh-form-manager-submit-border-radius);
    padding: var(--bh-form-manager-submit-padding);
    font-family: var(--bh-form-manager-submit-font-family);
    font-style: normal;
    font-weight: var(--bh-form-manager-submit-font-weight);
    font-size: var(--bh-form-manager-submit-font-size);
    line-height: var(--bh-form-manager-submit-height);
    letter-spacing: var(--bh-form-manager-submit-letter-spacing);
    text-align: center;
    text-transform: uppercase;
    color: var(--bh-form-manager-submit-text);
    background-color: var(--bh-form-manager-submit-bg);
    cursor: pointer;
    transition: var(--bh-form-manager-submit-hover-transition);
  }

  .bh-form-manager__submit__input.bh-form-manager__submit__input:hover,
  .bh-form-manager__submit__input.bh-form-manager__submit__input:focus-visible {
    border: var(--bh-form-manager-submit-hover-border);
    border-radius: var(--bh-form-manager-submit-hover-border-radius);
    padding: var(--bh-form-manager-submit-hover-padding);
    font-family: var(--bh-form-manager-submit-hover-font-family);
    font-size: var(--bh-form-manager-submit-hover-font-size);
    color: var(--bh-form-manager-submit-hover-text);
    background-color: var(--bh-form-manager-submit-hover-bg);
  }

  .bh-form-manager__submit__input.bh-form-manager__submit__input:focus-visible {
    outline: 2px solid var(--bh-form-manager-submit-bg);
    outline-offset: 2px;
  }
}