@import '../../../style/global-parameters.scss';
@import './word-form.scss';

.oio-default-form {
  position: relative;
  width: 100%;

  .oio-row {
    .ant-form-item {
      margin-bottom: 0;

      &.ant-form-item-with-help {
        margin-bottom: 0;
      }
    }
  }

  .ant-form-item {
    margin-bottom: 0;

    &.ant-form-item-with-help {
      margin-bottom: 0;
    }
  }

  .#{$formItemClassPrefix} {
    & > .ant-form-item-row > .ant-form-item-label {
      flex-basis: var(--ss-ant-form-item-label-width);
      flex-shrink: 0;
      margin-right: 8px;

      & > label {
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }

    & > .ant-form-item-row > .ant-form-item-control {
      flex: 1;
      max-width: calc(100% - var(--ss-ant-form-item-label-width) - 8px);
    }

    &.hide-ant-form-item-label {
      & > .ant-form-item-row > .ant-form-item-control {
        max-width: 100%;
      }
    }
  }

  &.oio-form,
  .oio-form {
    &.ant-form-horizontal {
      .#{$formItemClassPrefix}-vertical > .ant-form-item-row {
        & > .ant-form-item-label {
          flex-basis: unset;
          text-align: left;
        }

        & > .ant-form-item-control {
          flex-basis: 100%;
          max-width: 100%;
        }
      }
    }

    &.ant-form-vertical {
      .#{$formItemClassPrefix} {
        & > .ant-form-item-row > .ant-form-item-control {
          flex: 1;
          // flex-basis: 100%;
          max-width: 100%;
        }
      }

      .#{$formItemClassPrefix}-horizontal {
        & > .ant-form-item-row > .ant-form-item-label {
          flex-basis: var(--ss-ant-form-item-label-width);
          margin-right: 8px;
        }

        &.hide-ant-form-item-label {
          & > .ant-form-item-row > .ant-form-item-control {
            max-width: 100%;
          }
        }

        & > .ant-form-item-row > .ant-form-item-control {
          flex: 1;
          max-width: calc(100% - var(--ss-ant-form-item-label-width) - 8px);
        }
      }
    }
  }

  .form-loading-icon {
    &:before,
    &:after {
      content: '' !important;
      width: 0 !important;
      height: 0 !important;
      border-radius: 50% !important;
      background-color: #606cee !important;
      opacity: 0.4 !important;
      position: absolute !important;
      top: 19px !important;
      left: 19px !important;
      animation: bounce 2s ease-in-out infinite !important;
    }

    &:after {
      animation-delay: -1s !important;
    }
  }
}