@import "./vars.pcss";

@keyframes formMsgLoader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.form {
  display: var(--formDisplay);
  flex-flow: var(--formFlexFlow);
  width: var(--formWidth);
  @mixin mb var(--formMb);

  &&--isHidden {
    --formDisplay: none;
  }

  div&__body {
    width: var(--formBodyWidth);
  }

  div&__header {
    padding: var(--formHeaderPadding);
    margin: var(--formHeaderMargin);

    &--isHidden {
      display: none;
    }
  }

  div&__footer {
    padding: var(--formFooterPadding);
    margin: var(--formFooterMargin);
  }

  &__row {
    width: var(--formRowWidth);
    display: var(--formRowDisplay);
    grid-template-columns: repeat(var(--formRowColumns), minmax(0, 1fr));
    gap: var(--formRowGridGap);
    padding: var(--formRowPadding);
    align-items: var(--formRowAlignItems);

    @mixin mb var(--formRowMarginBottom);

    @media(--tabletAbove) {
      &--isColumns-1 {
        --formRowColumns: 1;
      }

      &--isColumns-2 {
        --formRowColumns: 2;
      }

      &--isColumns-3 {
        --formRowColumns: 3;
      }

      &--isColumns-4 {
        --formRowColumns: 4;
      }

      &--isColumns-5 {
        --formRowColumns: 5;
      }

      &--isColumns-6 {
        --formRowColumns: 6;
      }
    }
  }

  &__col {
    width: var(--formColWidth);
    display: var(--formColDisplay);
    align-items: var(--formColAlignItems);
  }

  &__block {
    display: var(--formBlockDisplay);
    width: var(--formBlockWidth);
    flex-flow: var(--formBlockFlexFlow);
    @mixin scrollMt var(--formBlockScrollMarginTop);

    &:has([class*="isRequired"], [required]) {
      .formLabel {
        --formLabelRequiredSignDisplay: inline;
      }
    }
  }

  &__msg {
    display: var(--formMsgDisplay);
    width: var(--formMsgWidth);
    margin-top: var(--formMsgMt);
    margin-bottom: var(--formMsgMb);
    user-select: var(--formMsgUserSelect);

    &:empty {
      --formMsgDisplay: none;
    }

    &--isLoading,
    &.isLoading {
      --formMsgDisplay: block;
      cursor: wait;
    }

    &Loader {
      pointer-events: none;
      color: currentColor;
      position: relative;
      opacity: var(--formMsgLoaderOpacity);
      width: var(--formMsgLoaderSize);
      height: var(--formMsgLoaderSize);
      border: var(--formMsgLoaderBorder);
      border-bottom-color: transparent;
      border-radius: var(--formMsgLoaderBorderRadius);
      display: block;
      animation: formMsgLoader 1s linear infinite;
    }

    &Text {
      cursor: var(--formMsgTextCursor);
      color: var(--formMsgColor);
    }

    &[data-css-reason="valid"] {
      display: var(--formMsgValidDisplay);
    }
  }
}