/** Compatibility with WPForms Lite **/

@import "../../../assets/sass/config";
@import "../../../assets/sass/mixins";
@import "../../../assets/sass/direction";

.wpforms-container {
  --wpforms-button-size-margin-top: 0;
  --wpforms-button-border-radius: 0;
  --wpforms-button-size-height: auto;
  --wpforms-label-size-font-size: 1.4rem;
  --wpforms-label-color: var(--alpha-body-color);
  --wpforms-label-size-sublabel-font-size: 1.3rem;
}

// Checkbox, Radiobox
.wpforms-field-checkbox,
.wpforms-field-radio {
  .wpforms-field-label-inline {
    cursor: pointer;
  }
}

.wpforms-container .wpforms-form .wpforms-field-container {
  .wpforms-field input[type="radio"] {
    border-radius: 50%;
  }

  .wpforms-field.wpforms-field-radio input[type="radio"]:checked {
    background-color: var(--alpha-change-color-light-1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2333'/%3e%3c/svg%3e");
  }

  .wpforms-field.wpforms-field-checkbox input[type="checkbox"]:checked {
    background-color: var(--alpha-change-color-dark-1);
    border-color: var(--alpha-change-color-dark-1);
    color: var(--alpha-change-color-light-1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  }
}

// Fields
div.wpforms-container .wpforms-form .wpforms-field-container {

  .wpforms-field input,
  .wpforms-field select {
    height: auto;
  }

  .wpforms-field input[type="checkbox"],
  .wpforms-field input[type="radio"] {
    height: var(--wpforms-field-size-checkbox-size);
    margin-#{$right}: 12px;

    &:before,
    &:after {
      content: none;
    }
  }

  input:focus,
  textarea:focus,
  select:focus {
    box-shadow: none;
  }

  .wpforms-field input,
  .wpforms-field select,
  .wpforms-field textarea {
    color: inherit;
    font-size: inherit;
    line-height: 1.6;
    padding: 1.5rem 2.4rem;
    border-color: var(--alpha-form-field-border-color);
    border-radius: 0;

    &:focus {
      border-color: var(--alpha-form-field-focus-border-color);
    }
  }

  textarea.wpforms-field-medium {
    height: 150px;
  }

  .wpforms-field input::placeholder,
  .wpforms-field textarea::placeholder {
    color: inherit;
    transition: opacity 0.3s;
  }

  .wpforms-field input:focus::placeholder,
  .wpforms-field textarea:focus::placeholder {
    opacity: 0;
  }
}


div.wpforms-container .wpforms-field-container .wpforms-field-checkbox label,
div.wpforms-container .wpforms-field-container .wpforms-field-radio label {
  font-size: var(--wpforms-label-size-font-size);
}

div.wpforms-container.wpforms-row .wpforms-field-container .wpforms-field,
div.wpforms-container.wpforms-row .wpforms-field-container .wpforms-field input,
div.wpforms-container.wpforms-row .wpforms-submit-container button {
  height: 100%;
}

.wpforms-container .wpforms-field,
.wp-core-ui div.wpforms-container .wpforms-field {
  padding: 10px 0;
}

div.wpforms-container .wpforms-field.wpforms-field-checkbox ul li input+label,
div.wpforms-container .wpforms-field.wpforms-field-radio ul li input+label,
div.wpforms-container .wpforms-field.wpforms-field-payment-checkbox ul li input+label,
div.wpforms-container .wpforms-field.wpforms-field-payment-multiple ul li input+label,
div.wpforms-container .wpforms-field.wpforms-field-gdpr-checkbox ul li input+label {
  padding-inline-start: 0;
}

div.wpforms-container form.wpforms-form .wpforms-field input.wpforms-error:hover,
div.wpforms-container form.wpforms-form .wpforms-field input.user-invalid:hover,
div.wpforms-container form.wpforms-form .wpforms-field input.wpforms-error:focus,
div.wpforms-container form.wpforms-form .wpforms-field input.user-invalid:focus {
  box-shadow: none;
}

// Elementor widget
.elementor-widget .wpforms-container form.wpforms-form .wpforms-field-container .wpforms-field {

  input[type="radio"],
  input[type="checkbox"] {
    padding: 0;
    border: 1px solid #ccc;
  }
}

div.elementor-widget-wpforms .wpforms-container .wpforms-form .wpforms-submit-container {
  padding: 2rem 0 0;
}

// Submit button
div.wpforms-container .wpforms-form .wpforms-submit-container button.wpforms-submit {
  --alpha-btn-skin-color: var(--alpha-primary-color);
  --alpha-btn-color: var(--alpha-change-color-light-1);
  --alpha-btn-bd-color: var(--alpha-primary-color);
  --alpha-btn-bg-color: var(--alpha-primary-color);
  --alpha-btn-hover-color: var(--alpha-change-color-light-1);
  --alpha-btn-hover-bd-color: var(--alpha-primary-color-hover);
  --alpha-btn-hover-bg-color: var(--alpha-primary-color-hover);
  --alpha-btn-active-color: var(--alpha-change-color-light-1, --alpha-btn-hover-color);
  --alpha-btn-active-bd-color: var(--alpha-primary-color-hover, --alpha-btn-hover-bd-color);
  --alpha-btn-active-bg-color: var(--alpha-primary-color-hover, --alpha-btn-hover-bg-color);
  --alpha-btn-icon-spacing: .4rem;
  --alpha-btn-icon-size: 1.3em;

  display: inline-block;
  border: 1px solid var(--alpha-btn-bd-color);
  background-color: var(--alpha-btn-bg-color);
  color: var(--alpha-btn-color);
  outline: 0;
  // Height 44px, Width 120px for default
  padding: 1.6rem 4rem;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: -.025em;
  line-height: 1.6;
  text-transform: capitalize;
  text-align: center;
  transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s, transform .3s;
  white-space: nowrap;
  cursor: pointer;

  i {
    display: inline-block;
    position: relative;
    margin-#{$left}: var(--alpha-btn-icon-spacing);
    font-size: var(--alpha-btn-icon-size);
    vertical-align: -0.15em;
    line-height: 0;
  }

  svg {
    width: var(--alpha-btn-icon-size);
    height: var(--alpha-btn-icon-size);

    fill: var(--alpha-btn-color);
    stroke: var(--alpha-btn-color);

    transition: fill .3s, stroke .3s;
  }

  &:hover {
    background: none;
    color: var(--alpha-btn-hover-color);
    border-color: var(--alpha-btn-hover-bd-color);
    background-color: var(--alpha-btn-hover-bg-color);

    svg {
      fill: var(--alpha-btn-hover-color);
      stroke: var(--alpha-btn-hover-color);
    }
  }

  &:active,
  &:focus {
    background: none;
    color: var(--alpha-btn-active-color, --alpha-btn-hover-color);
    border-color: var(--alpha-btn-active-bd-color, --alpha-btn-hover-bd-color);
    background-color: var(--alpha-btn-active-bg-color, --alpha-btn-hover-bg-color);

    svg {
      fill: var(--alpha-btn-active-color, --alpha-btn-hover-color);
      stroke: var(--alpha-btn-active-color, --alpha-btn-hover-color);
    }
  }

  &~.wpforms-submit {
    display: none !important;
  }
}

div.wpforms-container form.wpforms-form .wpforms-submit-container {
  padding: 10px 0;

  .wpforms-submit span {
    text-transform: inherit;
    letter-spacing: inherit;
  }

  // Button Icon
  .btn-icon {
    --alpha-btn-icon-spacing: .8rem;

    >i:first-child:last-child {
      margin: 0;
      line-height: 1;
    }
  }

  .btn-icon-right {

    >i,
    >svg {
      margin-#{$left}: var(--alpha-btn-icon-spacing);
      margin-#{$right}: 0;
    }
  }

  .btn-icon-left {

    >i,
    >svg {
      margin-#{$left}: 0;
      margin-#{$right}: var(--alpha-btn-icon-spacing);
    }
  }

  // Reveal Button
  .btn-icon-left.btn-reveal {

    i,
    svg {
      opacity: 0;
      margin-#{$left}: -1em;
      transform: translateX(if-ltr(.5em, -.5em));
      margin-#{$right}: 0;
      transition: transform .3s, opacity .3s, margin .3s;
    }

    &:not(:hover, :active, :focus) svg {
      width: 0;
    }

    &:hover,
    &:active,
    &:focus {
      --alpha-btn-icon-spacing: .7rem;

      i,
      svg {
        opacity: 1;
        margin-#{$left}: 0;
        transform: translateX(0);
        margin-#{$right}: var(--alpha-btn-icon-spacing);
      }
    }
  }

  .btn-icon-right.btn-reveal {

    i,
    svg {
      opacity: 0;
      margin-#{$right}: -1em;
      transform: translateX(if-ltr(-.5em, .5em));
      margin-#{$left}: 0;
      transition: transform .3s, opacity .3s, margin .3s;
    }

    &:not(:hover, :active, :focus) svg {
      width: 0;
    }

    &:hover,
    &:active,
    &:focus {
      --alpha-btn-icon-spacing: .7rem;

      i,
      svg {
        opacity: 1;
        margin-#{$left}: var(--alpha-btn-icon-spacing);
        transform: translateX(0);
        margin-#{$right}: 0;
      }
    }
  }

  // Slide Button
  .btn-slide-left {

    &:hover,
    &:active,
    &:focus {
      i {
        animation: .5s ease slideLeft;
      }
    }
  }

  .btn-slide-right {

    &:hover,
    &:active,
    &:focus {
      i {
        animation: .5s ease slideRight;
      }
    }
  }

  .btn-slide-up {

    &:hover,
    &:active,
    &:focus {
      i {
        animation: .5s ease slideUp;
      }
    }
  }

  .btn-slide-down {

    &:hover,
    &:active,
    &:focus {
      i {
        animation: .5s ease slideDown;
      }
    }
  }

  .btn-infinite {
    &:hover {
      i {
        animation-iteration-count: infinite;
      }
    }
  }

  // Button Text Hover Styles
  .btn-text-hover-effect {
    vertical-align: middle;
    overflow: hidden;

    span {
      display: inline-block;
      position: relative;
      z-index: 3;
      transition: opacity .65s, transform .85s;

      &:after {
        content: attr(data-text);
        position: absolute;
        white-space: nowrap;
        top: 50%;
        opacity: 0;
        transition: inherit;
      }
    }

    &:hover span:after {
      opacity: 1;
    }

    &:not(.btn-icon) {

      span,
      span:after {
        width: 100%;
      }
    }
  }

  .btn-text-switch-left {
    span:after {
      left: 100%;
      transform: translate(50%, -50%);
    }

    &:hover span {
      transform: translateX(-200%);

      &:after {
        transform: translate(100%, -50%);
      }
    }
  }

  .btn-text-switch-up {
    span:after {
      left: 50%;
      transform: translate(-50%, 100%);
    }

    &:hover span {
      transform: translateY(-200%);

      &:after {
        transform: translate(-50%, 150%);
      }
    }
  }

  .btn-text-marquee-left {
    span:after {
      left: 100%;
      transform: translate(100%, -50%);
    }

    &:hover span {
      animation: btnMarqueeLeft 2s linear infinite;
    }
  }

  .btn-text-marquee-up {
    span:after {
      top: 100%;
      left: 50%;
      transform: translate(-50%, 100%);
    }

    &:hover span {
      animation: btnMarqueeUp 1s linear infinite;
    }
  }

  .btn-text-marquee-down {
    span:after {
      top: -100%;
      left: 50%;
      transform: translate(-50%, -100%);
    }

    &:hover span {
      animation: btnMarqueeDown 1s linear infinite;
    }
  }

  /* Button Background Hover Styles */

  // Sweep Effects
  .btn-bg-hover-effect {
    position: relative;
    overflow: hidden;

    span,
    i {
      position: relative;
      z-index: 1;
    }

    &.btn-outline {
      background-color: transparent;
    }

    &.btn-bubble,
    &.btn-bubble.btn-outline {
      --alpha-btn-color: var(--alpha-dark-color);

      padding: 0;
      border: none;
    }
  }

  .btn-sweep-to-right {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-sweep-to-left {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-sweep-to-bottom {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-sweep-to-top {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-sweep-to-horizontal {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-sweep-to-vertical {
    &:hover {
      background-color: var(--alpha-btn-bg-color);
    }
  }

  .btn-antiman,
  .btn-bubble {
    overflow: visible;
  }

  .btn-bubble {
    background-color: transparent !important;
  }
}

div.wpforms-container .wpforms-form .wpforms-submit-container {

  input[type="submit"]:disabled,
  button[type="submit"]:disabled,
  .wpforms-page-button:disabled {
    background-color: var(--alpha-change-border-color);
    color: var(--alpha-body-color);
    opacity: 1;
  }
}

div.wpforms-container-full input[type=submit]:focus:after,
div.wpforms-container-full button[type=submit]:focus:after,
div.wpforms-container-full .wpforms-page-button:focus:after,
.wp-core-ui div.wpforms-container-full input[type=submit]:focus:after,
.wp-core-ui div.wpforms-container-full button[type=submit]:focus:after,
.wp-core-ui div.wpforms-container-full .wpforms-page-button:focus:after {
  content: none;
}

.wpforms-form .wpforms-submit-container .wpforms-submit.wpforms-submit-icon:after {
  position: static;
  border: none;
  font-family: $framework-font;
  content: if-ltr("\e92c", "\e92b");
  font-size: 1.07em;
  font-weight: 400;
  line-height: 0;
  margin-#{$left}: 1rem;
  vertical-align: -2px;
}

.wpforms-container .wpforms-submit-spinner {
  display: none !important;
}

/* Size Style */
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-xs .wpforms-form .wpforms-field-container .wpforms-field textarea {
  padding: 0.8rem 2.4rem;
}

div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-sm .wpforms-form .wpforms-field-container .wpforms-field textarea {
  padding: 1.05rem 2.4rem;
}

div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field input,
div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field select,
div.controls-lg .wpforms-form .wpforms-field-container .wpforms-field textarea {
  padding: 1.8rem 2.4rem;
}

/* Border Style */
div.controls-ellipse .wpforms-container .wpforms-form .wpforms-field-container input,
div.controls-ellipse .wpforms-container .wpforms-form .wpforms-field-container select {
  border-radius: 9rem;
}

div.controls-ellipse .wpforms-container .wpforms-form .wpforms-field-container textarea {
  border-radius: var(--alpha-corner-md);
}

div.controls-rounded .wpforms-container .wpforms-form .wpforms-field-container input,
div.controls-rounded .wpforms-container .wpforms-form .wpforms-field-container select,
div.controls-rounded .wpforms-container .wpforms-form .wpforms-field-container textarea {
  border-radius: var(--alpha-corner-sm);
}

/* Label, Floating Style */

div.wpforms-container {

  &,
  &:not(:empty) {
    margin-top: 0;
  }

  .wpforms-form .wpforms-field-label {
    font-size: inherit;
    font-weight: 600;
    color: var(--alpha-change-color-dark-1);
    margin: 0.4rem 0 1.1rem;
  }

  .wpforms-form .wpforms-required-label {
    color: inherit;
  }

  .wpforms-form .wpforms-field-label-inline {
    font-size: inherit;
  }
}

div.label-floating {
  .wpforms-form .wpforms-field-label {
    margin: 0 0 -2rem;
    position: relative;
    top: 1.5rem;
    color: inherit;
    font-weight: 400;
    line-height: 2rem;
    transition: color 0.3s, font-size 0.3s, transform 0.3s;
    pointer-events: none;
  }

  &.controls-xs .wpforms-field-label {
    top: 0.8rem;
  }

  &.controls-sm .wpforms-field-label {
    top: 1.05rem;
  }

  &.controls-lg .wpforms-field-label {
    top: 1.8rem;
  }

  .wpforms-container .wpforms-form .wpforms-field input,
  .wpforms-container .wpforms-form .wpforms-field textarea {
    border-width: 0 0 1px;
    padding-left: 0;
    padding-right: 0;
    transition: border-bottom-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 var(--alpha-primary-color);
    min-height: auto;
  }

  // focused field
  .wpforms-field.field-float .wpforms-field-label {
    color: var(--alpha-primary-color);
    font-size: 1.2rem;
    transform: translateY(-2rem);
    pointer-events: auto;
  }

  .wpforms-form .wpforms-field.field-float input,
  .wpforms-form .wpforms-field.field-float textarea {
    border-bottom-color: var(--alpha-primary-color);
    box-shadow: 0 1px var(--alpha-primary-color);
  }

  .wpforms-container .wpforms-form .wpforms-submit-container {
    padding-top: 2.5rem;
  }
}

// Errors
div.wpforms-container .wpforms-form .wpforms-field-container .wpforms-field {

  input.wpforms-error,
  input.user-invalid,
  textarea.wpforms-error,
  textarea.user-invalid,
  select.wpforms-error,
  select.user-invalid,
  .wpforms-has-error .choices__inner {
    border-color: #cc0000;
  }
}

div.wpforms-container .wpforms-form .wpforms-field-container label.wpforms-error {
  color: var(--alpha-danger-color);
}

div.wpforms-row.wpforms-container {
  form {
    display: flex;
    flex-wrap: wrap;
  }

  .wpforms-field-container {
    flex: 1;
  }

  & form.wpforms-form .wpforms-submit-container {
    padding: 10px 0;
  }

  .wpforms-error-container {
    flex: 0 0 100%;
  }

  label.wpforms-error,
  em.wpforms-error {
    position: absolute;
  }
}

// Extras
.wpforms-error-fixed {
  .wpforms-form label.wpforms-error {
    position: absolute;
  }
}

img.wpforms-submit-spinner {
  padding-top: 0 !important;
}