// stylelint-disable selector-max-class
// stylelint-disable declaration-no-important

.focusform-form {
  --lx-gutter-x: calc(-1 * (#{$container-padding-x} / 2));
  --lx-focusform-color: #{$focusform-color};
  --lx-focusform-heading-color: #{$focusform-heading-color};
  --lx-focusform-bg-color: #{$focusform-bg-color};

  color: var(--lx-focusform-color);

  .bg {
    background-color: var(--lx-focusform-bg-color);
  }

}

.if-focusform-is-active--visible {
  opacity: 1;
  transition: $transition-base;
}

.focusform-backdrop {
  z-index: var(--#{$prefix}backdrop-zindex);
  opacity: var(--#{$prefix}backdrop-opacity);

  .modal & {
    display: none;
    opacity: 0;
  }

  &.collapsed {
    z-index: -20;
    display: none;

    ~ .position-relative,
    ~ .position-absolute {
      .if-focusform-is-active--show {
        display: none !important;
      }

      .if-focusform-is-active--visible {
        z-index: -10;
        opacity: 0;
      }
    }
  }

  .header &.collapsed ~ .position-relative,
  .header &.collapsed ~ .position-absolute, {
    z-index: ($zindex-dropdown - 1);
  }

  &:not(.collapsed) ~ .position-relative,
  &:not(.collapsed) ~ .position-absolute {
    z-index: ($zindex-modal - 1);

    .form-is-not-focus {
      display: none !important;
    }
  }
}

.bg {

  &.focusform-bg {
    top: var(--lx-gutter-x);
  }

  &.focusform-options-bg {
    bottom: 0;

    .focusform.is-active &,
    .focusform.is-activating & {
      bottom: calc(-1rem + var(--lx-gutter-x));
    }
  }

  &.focusform-bg,
  &.focusform-options-bg {
    right: var(--lx-gutter-x);
    left: var(--lx-gutter-x);
  }
}

.focusform-heading {
  color: var(--lx-focusform-heading-color);
}

.focusform-close {
  position: absolute;
  top: var(--lx-gutter-x);
  right: var(--lx-gutter-x);
}

.focusform-collapse {

  .is-sticky &.show {
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.focusform-keyword {

  input:not(:focus) ~ label {
    color: $input-placeholder-color;
  }
}