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

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