Form

.Form {
  @apply w-full;

  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
    @apply mb-6;
  }

  [type="submit"] {
    @apply cursor-pointer
  }

  label {
    @apply block
      mb-2
      font-bold;
  }

  ul, ol {
    @apply mb-0;
    li {
      @apply list-none;
    }
  }

  &__copy {
    @apply mb-4
      2xl:mb-6;
  }

  &.Theme {
    @apply p-7
      2xl:p-8
      3xl:p-10
      rounded-md;

    input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {
      @apply border-gray-200
        focus:border-gray-300
        rounded-sm;
    }

    &.Theme__slant {
      &:before {
        @apply top-0
          left-[-30%]
          right-[49%]
          bottom-0
          skew-x-[17deg];
      }
    }

    [type="submit"] {
      @extend .Button, .Button--ghost, .Button--inverted;
    }
  }

  &--hubspot, &--cms {
    .hs-error-msgs, .freeform-errors {
      @apply -mt-5;
      &, &:last-child {
        @apply mb-4;
      }

      li {
        @apply ml-0
          pl-0;

        &, label {
          @apply text-red #{!important};
          @apply text-base
            font-bold;
        }
      }
    }
  }

  &--hubspot {
    fieldset,
    input,
    select {
      @apply max-w-full #{!important};
    }

    label + legend {
      @apply mb-2
        border-b-0;
    }

    [type='submit'] {
      @extend .Button, .Button--ghost;
    }

    .hs-richtext {
      h2 {
        @apply mb-4
          2xl:mb-6;
      }
    }

    .hs-error-msgs {
      @apply -mt-5;
      &, &:last-child {
        @apply mb-4;
      }

      li {
        @apply ml-0
          pl-0;

        label {
          @apply text-red
            text-base;
        }
      }
    }

    .hs-recaptcha {
      @apply my-6
        mx-0;
    }

    .legal-consent-container {
      label {
        span {
          @apply text-base;
        }
      }

      p, .hs-richtext {
        @apply mb-2 
          text-xs;
      }

     .hs-form-booleancheckbox {
        @apply ml-0;

        span {
          @apply leading-none;
        }
      }

     .hs-form-booleancheckbox-display {
      @apply flex;

      input {
        @apply mt-0;
      }

      span {
        @apply ml-2;
      }
     }
    }

    &.Form--collapsible-terms {
      .legal-consent-term-label {
        @apply cursor-pointer 
          mb-2
          text-white
          text-xs
          font-bold 
          p-0;
        span {
          @apply text-xs;
        }
      }

      .legal-consent-term-text {
        @apply hidden;

        & + div {
          @apply mt-2;
        }
      }

      .toggle--off {
        @apply hidden;
      }

      .legal-consent-container {
        &.open {
          .legal-consent-term-text {
            @apply block;
          }

          .toggle--on {
            @apply hidden;
          }

          .toggle--off {
            @apply inline;
          }
        }
       }
    }
  }

  &--cms {
    form {
      @apply flex
        flex-col;
    }

    button[type="submit"] {
      @extend .Button, .Button--ghost;
    }

    label {
      &:after {
        @apply ml-1 
          text-red;
      }
    }

    .freeform-form-errors {
      @apply mb-4;

      p, li {
        @apply text-red
          font-bold;
      }
      
      p {
        @apply mb-3
          md:mb-6 #{!important};
      }
    }

    .freeform-form-success {
      @apply mb-2
        md:mb-6
        bg-blue
        border
        border-blue;

      &, p {
        @apply text-white #{!important};
      }
    }

    [data-freeform-controls] {
      @apply justify-start;
    }

    [class*="freeform-col-"] {
      @apply px-0;
    }

    .g-recaptcha {
      @apply mb-4;
    }
  }

  &--featured {
    @apply p-8 
      md:p-12
      bg-gray-200
      rounded-sm;
  }

&--popup {
  @apply fixed
    inset-0
    z-[9999]
    hidden
    overflow-y-auto
    p-2
    sm:p-6
    bg-black/70;

  &.is-active {
    @apply flex
      items-start
      justify-center;
  }

  .Form__body {
    @apply relative
      w-full
      max-w-5xl
      p-4
      xs:p-6
      sm:p-10
      2xl:p-8
      3xl:p-10
      bg-white
      rounded-xxs;
  }

  .Form__body > h5 {
    @apply xs:text-3xl
      mb-6
      pr-12;
  }

  .Form__body > .Icon {
    @apply absolute
      top-5
      right-4
      sm:top-11
      sm:right-10
      z-[1]
      size-5
      cursor-pointer
      saturate-0
      brightness-0;
  }

  .hbspt-form {
    @apply w-full;

    .hs-form {
      @apply flex
        flex-wrap
        gap-x-6;

      input, optgroup, select, textarea {
        &:not(input[type=submit]) {
          @apply mb-5
            p-2
            text-sm;
        }
      }

      label {
        @apply text-sm;
      }

      .hs-form-booleancheckbox {
        input {
          margin-bottom: 0 !important;
        }
      }

      .hs-form-field {
        @apply basis-full
          max-w-full;
      }

      .hs_firstname,
      .hs_lastname,
      .hs_phone,
      .hs_company {
        @apply md:basis-[calc(50%-0.75rem)]
          md:max-w-[calc(50%-0.75rem)];
      }

      .hs_email {
        @apply basis-full
          max-w-full;
      }

      .hs-dependent-field {
        @apply w-full;
      }
    }
  }
}
}

// for HubSpot forms embeded via Custom Code in Rich Content block
.hbspt-form {
  @extend .Form, .Form--hubspot;
}