@use "sass:math";

.#{$ns}Form {
  font-size: var(--Form-fontSize);
  position: relative;
  font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;

  @media screen and (min-width: 1280px) and (max-width: 1440px) {
    font-size: 0.75rem;
  }

  &-moreBtn {
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
    z-index: 8;
    border: 1px solid var(--saas-border-color);
    border-bottom: none;
    background-color: #f8f7fa;
    font-size: 12px;
    color: gray;
    padding: 0 4px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;

    &:hover {
      color: var(--saas-Primary-Color);
    }
  }

  .#{$ns}Alert {
    margin: 8px 0 0 0;
    margin-bottom: 0;
  }

  .h- {
    box-shadow: none;
  }

  .data-display {
    padding: 8px 0;
    overflow: hidden;

    @include media-breakpoint-down(sm) {
      padding: 8px;
    }
  }

  // 一般是快速编辑里的最后一个输入框
  &--quickEdit>div:last-of-type {
    margin-bottom: 0;
  }

  &--hidden {
    display: none !important;
  }

  &--inline {
    background-color: var(--saas-crud-title-from-color);
    padding: 8px;
    padding-bottom: 0;
    border-bottom: 1px solid var(--saas-border-color);

    svg.icon {
      top: 0;
      font-size: 14px;
    }

    .#{$ns}Form-group--inline {
      display: none;
    }

    .#{$ns}Form-item {

      &--hidden {
        display: none;
      }
    
      .#{$ns}Form-label {
        height: var(--Form-input-height);
        padding-top: 0;
        margin-bottom: 0;
        font-size: 0.75rem;
        border: none;
        background: transparent;
  
        &+.#{$ns}Form-value {
          .#{$ns}SelectControl,
          .#{$ns}ResultBox,
          .#{$ns}Select,
          .#{$ns}DatePicker,
          .#{$ns}DateRangePicker,
          .#{$ns}Picker-input,
          .#{$ns}SwitchControl,
          .#{$ns}DateRangeControl,
          .#{$ns}DatePicker-content,
          .#{$ns}TextControl-input {
            font-size: 0.75rem;
          }
        }
      }
  
      .#{$ns}Form-value {
        overflow: hidden;
        font-size: 0.75rem;
  
        .#{$ns}TextControl-input,
        .#{$ns}ResultBox,
        .#{$ns}SelectControl,
        .#{$ns}Select,
        .#{$ns}SwitchControl,
        .#{$ns}PickerControl,
        .#{$ns}Picker-input,
        .#{$ns}DateRangePicker {
          height: var(--Form-input-height);
          border-radius: 4px;
          min-height: unset;
          font-size: 0.75rem;
        }
  
        .#{$ns}TransferDropDown-content {
          .#{$ns}GroupedSelection-item {
            font-size: 0.75rem;
          }
        }
      }
    }

    >.#{$ns}Button {
      margin-bottom: 8px;
      margin-right: calc(var(--Form-item-gap) / 2);
    }

    >.#{$ns}PlainField {
      display: inline-block;
      padding-top: var(--Form-input-paddingY);
      // padding-bottom: var(--Form-input-paddingY);
    }
  }

  &.hasFieldSet {
    .#{$ns}Collapse {
      &-header {
        width: calc(100% - 8px);
      }
    }
  }
}

.#{$ns}Form-value {
  .is-showCount {
    max-width: unset;
  }
}

.#{$ns}Form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  width: 100%;
  background-color: var(--saas-crud-title-from-color);
  padding: 8px 0;
  border-bottom: 1px solid var(--saas-Border-Dividers);
  row-gap: var(--Form-item-gap);

  svg.icon {
    top: 0;
    font-size: 14px;
  }

  .#{$ns}Form-group--grid {
    display: none;
    width: 100%;
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e7e7e7;
    padding: 8px 0;
    margin-left: 0;

    .#{$ns}Form-groupColumn {
      width: auto;
      flex: none;

      .#{$ns}CheckboxControl {
        padding-top: 0;
      }
    }
  }

  .show-divider {
    position: relative;

    &:after {
      position: absolute;
      top: -4px;
      left: 130px;
      content: '';
      width: calc(100% - 130px);
      height: 1px;
      background-color: var(--saas-Border-Dividers);
    }
  }

  .#{$ns}Form-item {
    display: flex;
    justify-content: space-between;

    &--grid {
      margin-bottom: 0px;
      margin-right: 8px;
    }

    .#{$ns}Form-label {
      height: var(--Form-input-height);
      max-width: unset;
      padding-top: 0;
      margin-bottom: 0;
      width: 130px;
      max-width: 50%;
      font-size: 0.75rem;
      border: none;
      background: transparent;
      margin-right: #{px2rem(16px)};

      @media screen and (min-width:1921px) and (max-width:4680px) {
        width: 160px;
      }

      // 紧挨着label的value圆角去掉
      &+.#{$ns}Form-value {

        .#{$ns}SelectControl,
        .#{$ns}ResultBox,
        .#{$ns}Select,
        .#{$ns}DatePicker,
        .#{$ns}DateRangePicker,
        .#{$ns}Picker-input,
        .#{$ns}SwitchControl,
        .#{$ns}DateRangeControl,
        .#{$ns}DatePicker-content,
        .#{$ns}TextControl-input {
          font-size: 0.75rem;
          // border-top-left-radius: 0 !important;
          // border-bottom-left-radius: 0 !important;
        }
      }

    }

    .#{$ns}Form-value {
      flex: 1;
      overflow: hidden;
      font-size: 0.75rem;

      .#{$ns}Form-control {
        width: 100%;
      }

      // 表单快速搜索里面的输入框-样式保持一致
      .#{$ns}TextControl-input,
      .#{$ns}ResultBox,
      .#{$ns}SelectControl,
      .#{$ns}Select,
      .#{$ns}SwitchControl,
      .#{$ns}PickerControl,
      .#{$ns}Picker-input,
      .#{$ns}DateRangePicker {
        height: var(--Form-input-height);
        // line-height: var(--Form-input-height);
        border-radius: 4px;
        min-height: unset;
        font-size: 0.75rem;

      }

      // .#{$ns}SwitchControl {
      //   padding: 0 5px;
      //   display: flex;
      //   align-items: center;
      // }

      .#{$ns}TransferDropDown-content {
        .#{$ns}GroupedSelection-item {
          font-size: 0.75rem;
        }

      }
    }
  }

}


.#{$ns}Form-static {
  min-height: var(--Form-input-height);
  padding-top: var(--Form-label-paddingTop);
  padding-bottom: var(--Form-label-paddingTop);
  margin-bottom: 0;

  @media screen and (min-width: 1280px) and (max-width: 1440px) {
    min-height: 1.2rem;
    padding: 0 0;
  }

  @media screen and (min-width: 1441px) and (max-width: 1680px) {
    min-height: 1.5rem;
    padding: 0rem 0;
  }

  .#{$ns}Form-item--inline>.#{$ns}Form-value>& {
    display: inline-block;
    vertical-align: top;
  }

  &--borderFull {
    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    border-radius: var(--Form-input-borderRadius);
    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
  }

  &--borderHalf {
    border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    border-radius: var(--Form-input-borderRadius);
    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
  }
}

.#{$ns}Form-label {
  font-weight: var(--fontWeightNormal);
  margin-bottom: var(--gap-xs);
  position: relative;
  font-size: var(--Form-item-fontSize);
  color: var(--Form-item-fontColor);

  >span {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;

    @include media-breakpoint-down(sm) {
      justify-content: start;
    }
  }
}




.#{$ns}Form-star {
  color: var(--danger);
  font-size: 16px;
  line-height: 1;
  margin-left: 4px;
}

.#{$ns}Form-feedback {
  color: var(--danger);
  margin: var(--Form-input-marginBottom) 0 0;
  padding-left: var(--gap-base);
  font-size: var(--fontSizeSm);
}

.#{$ns}Form-description {
  display: block;
  color: var(--Form-description-color);
  margin: var(--Form-input-marginBottom) 0 0;
  font-size: var(--Form-description-fontSize);
}

.#{$ns}Form-hint {
  display: inline-block;
  margin-left: var(--gap-sm);
  padding-top: var(--Form-input-paddingY);
  vertical-align: top;
}

.#{$ns}Form-item {
  margin-bottom: var(--Form-item-gap);

  &.view-details {
    .#{$ns}TextareaControl {
      >textarea {
        padding: 0;
      }

      >.#{$ns}TextareaControl-counter {
        display: none;
      }
    }
  }

  // &:last-child {
  // Jay
  // margin-bottom: 0;
  // }

  .#{$ns}Grid-form>&:last-child {
    margin-bottom: 0;
  }

  .#{$ns}Form--inline>&--inline {
    &:last-child {
      margin-right: 0;
      margin-bottom: 0;
    }
  }

  .#{$ns}Form-remark {
    padding-top: var(--Form-label-paddingTop);
    vertical-align: top;
  }

  &--inline {
    margin-bottom: 8px;
    margin-right: calc(var(--Form-item-gap) / 2);
  }

  &--horizontal {
    >.#{$ns}Form-label {
      text-align: var(--Form--horizontal-label-align);
      white-space: var(--Form--horizontal-label-whiteSpace);
    }
  }

  &--normal {
    width: 100%;

    >.#{$ns}Form-label {
      display: block;

      >span {
        display: flex;
        justify-content: flex-start;
      }

      .#{$ns}Form-star {
        margin-left: 4px;
        font-size: 16px;
      }
    }
  }

  &.is-error>.#{$ns}Form-label {
    color: var(--danger);
  }
}

.#{$ns}Form-item.is-linkUrl {
  color: #4f86f4;
  cursor: pointer;

  .#{$ns}Form-value {
    .#{$ns}Form-control {
      color: #4f86f4 !important;
    }
  }

  .#{$ns}Form-static {
    .#{$ns}Form-control {
      color: #4f86f4 !important;
    }
  }
}

// 加高输入框的高度
.#{$ns}TextControl-xs {
  .#{$ns}TextControl-input {
    height: 100%;

    input[type="password"] {
      letter-spacing: 3.3px;

      &::selection {
        background-color: none;
        color: unset;
        /* 设置选中文本的背景色 */
      }

      &::-moz-selection {
        background-color: none;
        color: unset;
        /* 设置选中文本的背景色 */
      }

      &::-webkit-selection {
        background-color: none;
        color: unset;
        /* 设置选中文本的背景色 */
      }

      // &:hover {
      //   background-color: #06d6a0;
      // }
    }

    /* IE/Edge 特有的前缀 */
    input[type='password']::selection {
      color: none;
      /* 设置选中文本的背景色 */
    }

    input {
      height: 2.5rem;
      font-size: 1.5rem !important;
    }
  }

  .#{$ns}TextControl-simulateInput {
    height: 2.5rem;
    line-height: 2.5rem;
    top: 5px;
    font-size: 1.5rem !important;

    .#{$ns}TextControl-simulateInput-container {
      color: transparent;
      font-size: 1.5rem !important;

      &::after {
        height: 2.5rem;
        top: 0;
      }
    }
  }
}

.#{$ns}Form-placeholder {
  color: var(--Form-input-placeholderColor);
}

.#{$ns}Form-caption {
  display: inline-block;
  line-height: var(--Form-input-height);
  height: var(--Form-input-height);
  margin-left: px2rem(10px);
}

@include media-breakpoint-up(sm) {
  .#{$ns}Form-label {
    display: inline-block;
    max-width: 100%;
  }

  .#{$ns}Form-item--width {
    flex-grow: 0 !important;
    flex-basis: unset !important;
  }

  .#{$ns}Form-control--width {
    width: inherit;
  }

  .#{$ns}Form-control--sizeXs {
    // min-width: var(--Form-control-widthXs);
    // width: auto;
    width: var(--Form-control-widthXs);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthXs);
    }
  }

  .#{$ns}Form-control--sizeSm {
    width: var(--Form-control-widthSm);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthSm);
    }

    @media screen and (min-width: 1280px) and (max-width: 1440px) {
      width: 7rem;
    }

    @media screen and (min-width: 1441px) and (max-width: 1680px) {
      width: 8rem;
    }
  }

  .is-showCount {
    width: auto;
    max-width: 20rem;
    min-width: 10rem;

    .#{$ns}TextControl-input {

      input {
        flex-basis: 0;
        width: 30px;
      }
    }

    @media screen and (min-width: 1280px) and (max-width: 1440px) {
      min-width: 7rem;

      .#{$ns}TextControl-input {
        line-height: 1.2rem;
        min-height: 1.2rem;
        padding: 0 2px;

        .#{$ns}TextControl-value {
          margin: 0 2px;
          line-height: 14px;

          .#{$ns}TextControl-valueIcon {
            line-height: 12px
          }

        }

        input {
          margin: 0;
        }
      }

    }

    @media screen and (min-width: 1441px) and (max-width: 1680px) {
      min-width: 8rem;

      .#{$ns}TextControl-input {
        line-height: 1.5rem;
        min-height: 1.5rem;
        padding: 3px 2px;

        .#{$ns}TextControl-value {
          margin: 0 2px;
          line-height: 14px;

          .#{$ns}TextControl-valueIcon {
            line-height: 14px;
          }

        }
      }
    }
  }



  .#{$ns}Form-control--sizeMd {
    width: var(--Form-control-widthMd);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-control--sizeLg {
    width: var(--Form-control-widthLg);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthLg);
    }
  }

  .#{$ns}Form-item {
    &--horizontal {
      display: flex;
      flex-wrap: nowrap;
      margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
      margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);

      >* {
        padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
      }

      >.#{$ns}Form-value {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        min-width: 0;
      }

      .#{$ns}Form-itemColumn--xs,
      .#{$ns}Form-itemColumn--sm,
      .#{$ns}Form-itemColumn--normal,
      .#{$ns}Form-itemColumn--auto,
      .#{$ns}Form-itemColumn--md,
      .#{$ns}Form-itemColumn--lg {
        flex-grow: unset;
        flex-basis: unset;
      }

      >.#{$ns}Form-label {
        padding-top: var(--Form-label-paddingTop);
        margin-bottom: 0;
        flex-shrink: 0;

        .#{$ns}Form-star {
          margin-left: 4px;
          font-size: 16px;
        }
      }

      .#{$ns}Form-itemColumn--xs {
        width: var(--Form--horizontal-label-widthXs);
      }

      .#{$ns}Form-itemColumn--sm {
        width: var(--Form--horizontal-label-widthSm);
      }

      .#{$ns}Form-itemColumn--normal {
        width: var(--Form--horizontal-label-widthBase);
      }

      .#{$ns}Form-itemColumn--md {
        width: var(--Form--horizontal-label-widthMd);
      }

      .#{$ns}Form-itemColumn--lg {
        width: var(--Form--horizontal-label-widthLg);
      }

      .#{$ns}Form-itemColumn--auto {
        width: auto;
      }

      @for $i from (1) through $Form--horizontal-columns {
        .#{$ns}Form-itemColumn--#{$i} {
          flex: 0 0 percentage(math.div($i, $Form--horizontal-columns));
          max-width: percentage(math.div($i, $Form--horizontal-columns));
          min-height: 1px;
        }
      }
    }

    &--inline {
      display: inline-block;
      vertical-align: top;

      >.#{$ns}Form-label {
        padding-top: var(--Form-label-paddingTop);
        margin-bottom: 0;
        margin-right: calc(var(--Form-item-gap) / 2);

        @media screen and (min-width: 1441px) and (max-width: 1680px) {
          padding-top: 0px;
        }

        .#{$ns}Form-star {
          margin-left: 4px;
          font-size: 16px;
          display: flex;
          align-items: center;

        }

        .#{$ns}TplField {
          display: flex;
          align-items: center;
        }
      }

      >.#{$ns}Form-value {
        display: inline-block;
        vertical-align: top;

        >.#{$ns}Button--link {
          padding-top: var(--Form-label-paddingTop);
        }

        >.#{$ns}Form-control {
          vertical-align: top;
          display: inline-block;
        }

        >.#{$ns}Form-control.#{$ns}InputGroup {
          display: inline-flex;
        }

        >.#{$ns}TextControl--withAddOn {
          display: inline-flex;
        }
      }
    }

    &.nolabel-required {
      .#{$ns}Form-label {
        padding: 0;

        @media screen and (min-width: 1280px) and (max-width: 1440px) {
          height: 22px;
        }

        @media screen and (min-width: 1441px) and (max-width: 1680px) {
          height: 26px;
        }

        span {
          align-items: center;
          justify-content: unset;
          margin-left: 9px;
        }
      }

      .#{$ns}TextControl-input {
        border-left: 0;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;

        @media screen and (min-width: 1280px) and (max-width: 1440px) {
          min-height: 1.4rem;
        }

        @media screen and (min-width: 1441px) and (max-width: 1680px) {
          min-height: 1.5rem;
        }
      }

      .#{$ns}ResultBox {
        border-left: 0;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;

        @media screen and (min-width: 1280px) and (max-width: 1440px) {
          .#{$ns}ResultBox-value {
            margin: 0 3px;
            line-height: 1.2rem;
          }

          .#{$ns}ResultBox-placeholder {
            height: 1.2rem;
          }
        }

        @media screen and (min-width: 1441px) and (max-width: 1680px) {
          .#{$ns}ResultBox-value {
            margin: 0 3px;
            line-height: 1.3rem;
          }

          .#{$ns}ResultBox-placeholder {
            height: 1.5rem;
          }
        }

        &:hover {
          box-shadow: none;
        }

      }

      &:hover {
        .#{$ns}Form-label {
          border-color: var(--Form-input-onHover-borderColor);
        }

        .#{$ns}ResultBox {
          box-shadow: none;
        }
      }

      &.is-error {
        .#{$ns}Form-label {
          border-color: #ff4d4f;
        }

        &:hover {
          .#{$ns}Form-label {
            border-color: var(--Form-input-onHover-borderColor);
          }
        }
      }
    }
  }

  .#{$ns}Form-row {
    display: flex;
    flex-wrap: wrap;

    margin-left: calc(var(--Form-row-gutterWidth) / -2);
    margin-right: calc(var(--Form-row-gutterWidth) / -2);
    align-items: flex-start;

    >* {
      padding-left: calc(var(--Form-row-gutterWidth) / 2);
      padding-right: calc(var(--Form-row-gutterWidth) / 2);
    }
  }

  .#{$ns}Form-col {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .#{$ns}Form-rowInner {
    display: flex;
    flex-wrap: nowrap;

    >.#{$ns}Form-label {
      display: inline-block;
      vertical-align: top;
      padding-top: var(--Form-label-paddingTop);
      padding-right: var(--Form-row-gutterWidth);
    }

    >.#{$ns}Form-control {
      flex-basis: 0;
      flex-grow: 1;

      // &:not(.#{$ns}Form-control--withSize) {
      //   width: var(--Form-control-widthBase);
      // }
    }
  }
}

// .#{$ns}Form--quickEdit {
//   min-width: var(--Form-control-widthSm);
// }

.#{$ns}Form--column {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--Form-group-gutterWidth) / -2);
  margin-right: calc(var(--Form-group-gutterWidth) / -2);

  //Aug 去掉 > , form 中间可能嵌套tabs service 等多层组件dom
  // > .#{$ns}Form-item {
  .#{$ns}Form-item {
    // flex-grow: 1;

    padding-left: calc(var(--Form-group-gutterWidth) / 2);
    padding-right: calc(var(--Form-group-gutterWidth) / 2);

    //Aug
    width: 100%;
    margin-left: 0;
    margin-right: 0;

    &.autoLayout-other {
      width: 100%;
    }
  }

  //Aug 兼容一下 嵌套tabs service 的情况，这种情况比较常见
  // 去组件里继承属性form的布局属性中间不知嵌套多少层非form的其他组件，
  // 一方面不好控，另一方面导致组件间耦合，先这样在这里直接写样式
  .#{$ns}Tabs-pane {
    padding-left: 0;
    padding-right: 0;
  }

  .#{$ns}Service-body {
    display: flex;
    flex-wrap: wrap;
  }
}

// Aug 去掉 > , form 中间可能嵌套tabs service 等多层组件dom
// .#{$ns}Form--column-2 > .#{$ns}Form-item {
.#{$ns}Form--column-2 .#{$ns}Form-item {
  width: 50%;
}

.#{$ns}Form--column-3 .#{$ns}Form-item {
  // width: 33%;
  width: 33.33%; //Aug
}

.#{$ns}Form--column-4 .#{$ns}Form-item {
  width: 25%;
}

.#{$ns}Form--column-5 .#{$ns}Form-item {
  width: 20%;
}

.#{$ns}Form--column-6 .#{$ns}Form-item {
  width: 16.6%;
}

.#{$ns}Form--column-7 .#{$ns}Form-item {
  width: 14.2%;
}

.#{$ns}Form--column-8 .#{$ns}Form-item {
  width: 12.5%;
}

.#{$ns}Form-column-9 .#{$ns}Form-item {
  width: 11.1%;
}

.#{$ns}Form-column-10 .#{$ns}Form-item {
  width: 10%;
}

.#{$ns}Static-Html-TplOpen {
  display: inline-block;
}

/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
  .#{$ns}Form {
    .#{$ns}Form-item {
      display: flex;
      // flex-wrap: wrap;
      margin-bottom: 0;
      padding: 16px;
      position: relative;
      background-color: var(--saas-main-bg);
      overflow: hidden;

      .#{$ns}TplField.#{$ns}OpenExpandBtn {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .#{$ns}Table-expandBtn {
          color: var(--saas-Placeholder-Text);
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .#{$ns}Static-Html-TplOpen {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .#{$ns}Static-Html-TplOpen,
      .#{$ns}Static-Html-TplOpen>span {
        color: var(--Form-down-input-noteditable);
        max-height: 67.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;

      }

      &::before {
        content: '';
        position: absolute;
        left: calc(100% - (100% - 16px));
        bottom: 0;
        border-bottom: 1px solid var(--saas-Border-Dividers);
        width: calc(100% - 16px);
      }

      .#{$ns}Form-feedback-icon,
      .#{$ns}Form-feedback {
        margin: 5px 0 0;
        font-size: 12px;
      }

      .#{$ns}Form-feedback-icon {
        color: var(--saas-Placeholder-Text);
      }

      .#{$ns}InputGroup-addOn,
      .#{$ns}TextControl-addOn {
        border: none;
      }

      input::-webkit-input-placeholder {
        font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        font-size: 14px;
        color: var(--Form-select-placeholderColor);
      }

      input::-moz-placeholder {
        font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        font-size: 14px;
        color: var(--Form-select-placeholderColor);
      }

      input::-ms-input-placeholder {
        font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        font-size: 14px;
        color: var(--Form-select-placeholderColor);
      }

      >.#{$ns}Form-label {
        flex: 0 0 30%;
        max-width: 112px;
        min-width: 112px;
        min-height: 1px;
        text-align: left;
        padding-right: 16px;
        overflow-wrap: break-word;
        margin-right: 0;
        margin-bottom: 0;
        font-size: 15px;
        letter-spacing: 0.5px;
        font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        color: var(--saas-Placeholder-Text);
        display: flex;
        align-items: center;
        font-weight: 500;

        span {
          min-height: 24px;
          width: 100%;
        }

        .#{$ns}Form-star {
          font-size: 12px;
          display: flex;
          align-items: center;
          position: absolute;
          left: -10px;
          top: 50%;
          color: red;
          transform: translateY(-50%);
        }
      }


      .#{$ns}Form-rowInner {
        >.#{$ns}Form-label {
          display: block;
          width: 100%;
          font-size: 15px;
          font-weight: 500;
          letter-spacing: 0.5px;
          font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
          color: var(--saas-Placeholder-Text);
          padding-right: 16px;

        }

        .#{$ns}Table {
          font-size: 14px;
          color: var(--saas-Title-Text);

          &-table,
          th,
          td {
            font-size: 12px;
            color: var(--saas-Title-Text);
          }

          th {
            font-size: 12px;
          }

          .#{$ns}Table-foot {
            padding: 0;

            .#{$ns}Table-footTable {
              >tbody>tr>th {
                padding-left: 0;
              }
            }
          }

          .#{$ns}Form-item {
            .#{$ns}TextControl-input {
              min-width: 50px;
            }
          }
        }

        .#{$ns}ImageControl {
          overflow: visible;
          text-align: left;
          min-height: unset;
        }

        .#{$ns}RichTextControl {
          text-align: left;
          border: none !important;

          .#{$ns}RichTextControl-Rich {
            height: 100%;
            color: var(--saas-Title-Text);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .#{$ns}RichTextControl-RichValue {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              display: -webkit-box;
              padding-right: 8px;

              .#{$ns}RichTextControl-placeholder {
                color: var(--saas-Placeholder-Text);
                white-space: nowrap;
              }
            }

            .#{$ns}Table-expandBtn {
              color: var(--saas-Placeholder-Text);
              width: 16px;
              overflow: hidden;
              display: inline-flex;
              align-items: center;
              height: 100%;
              min-width: 10px;
              min-height: 24px;
            }
          }

          .rich-text-editor {
            .w-e-text-container {
              color: var(--saas-Title-Text);

              .w-e-text {
                padding: 0;

                p:nth-child(1) {
                  margin-top: 0;
                }
              }
            }
          }
        }

        .#{$ns}DateRangePicker {
          font-size: 15px;
          font-weight: 500;
          letter-spacing: 0.5px;
          font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        }
      }

      .#{$ns}Form-description {
        font-size: 15px;
      }

      .#{$ns}TextControl-input {
        font-size: 15px;

        input {
          height: 22px;
          font-weight: 500;
          letter-spacing: 0.5px;
          font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
          color: var(--saas-Title-Text);
          text-align: left;

          &::-webkit-input-placeholder {
            font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
            font-size: 14px;
            color: var(--saas-Placeholder-Text);

            font-weight: 500;
          }

          &::-moz-placeholder {
            font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
            font-size: 14px;
            color: var(--saas-Placeholder-Text);
            font-weight: 500;
          }

          &::-ms-input-placeholder {
            font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
            font-size: 14px;
            color: var(--saas-Placeholder-Text);
            font-weight: 500;
          }

        }
      }

      .#{$ns}Form-value,
      .#{$ns}Form-control {
        flex: 1;
        overflow: hidden;
        min-height: 22px;
        flex-wrap: wrap;
        font-size: 15px;
        text-align: left;

        &.is-disabled>.#{$ns}TextControl-input {
          background: transparent;
        }

        .#{$ns}Select.is-mobile {
          font-size: 15px;

          .#{$ns}Select-valueWrap {
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
            color: #666;
            font-size: 15px;
          }

          .#{$ns}Select-arrow {
            margin: 0;
          }
        }

        .#{$ns}Number {
          border: none;
          background: none;
          .#{$ns}Number-input {
            text-align: inherit;
            font-weight: 500;
            letter-spacing: 0.5px;
            font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
            color: var(--saas-Title-Text);

            &::-webkit-input-placeholder {
              font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
              font-size: 14px;
              color: var(--saas-Placeholder-Text);
              font-weight: 500;
            }

            &::-moz-placeholder {
              font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
              font-size: 14px;
              color: var(--saas-Placeholder-Text);
              font-weight: 500;
            }

            &::-ms-input-placeholder {
              font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
              font-size: 14px;
              color: var(--saas-Placeholder-Text);
              font-weight: 500;
            }
          }
        }

        .#{$ns}TransferPicker {
          .#{$ns}TransferPicker-icon {
            margin: 5px;
          }
        }

        .#{$ns}ResultBox-singleValue {
          text-align: left;
        }

        .#{$ns}Form-feedback-icon,
        .#{$ns}Form-feedback {
          margin: 5px 0 0;
          font-size: 12px;
        }

        .#{$ns}Form-feedback-icon {
          color: var(--saas-Placeholder-Text);
        }
      }

      .#{$ns}Form-value,
      .#{$ns}Form-rowInner {
        .#{$ns}SelectControl {
          .#{$ns}ResultBox {
            .#{$ns}ResultBox-singleValue {
              padding: 0;
            }
          }
        }

        .#{$ns}PickerControl {
          .#{$ns}Picker-input {
            border-color: transparent;
            font-size: 15px;
            padding-left: 0;
            padding-right: 18px;

            .#{$ns}Picker-placeholder {
              color: var(--saas-Placeholder-Text);
            }

            .#{$ns}Picker-btn {
              width: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100%;
            }
          }
        }

        .#{$ns}CheckboxesControl,
        .#{$ns}RadiosControl {
          .#{$ns}Checkbox {
            span {
              color: var(--saas-Title-Text);
              font-weight: 500;
            }
          }
        }

        .#{$ns}DateRangeControl {
          .#{$ns}DateRangePicker {
            .#{$ns}DateRangePicker-content {
              white-space: initial;
              justify-content: space-between;
              align-items: center;

              .#{$ns}DateRangePicker-value {
                justify-content: left;
              }

              .#{$ns}DateRangePicker-placeholder {
                color: var(--saas-Placeholder-Text);
              }

              .#{$ns}DateRangePicker-clear {
                svg {
                  fill: var(--saas-Placeholder-Text);
                }
              }

              .#{$ns}DateRangePicker-toggler {
                margin-top: 0;
                color: var(--saas-Placeholder-Text);
              }
            }
          }
        }

        .#{$ns}RadiosControl {
          .#{$ns}Checkbox {
            i {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              z-index: 1;
            }
          }
        }

        .#{$ns}DateRangeControl {
          .#{$ns}DateRangePicker {
            align-items: center;

            .#{$ns}DateRangePicker-placeholder {
              flex: 1;
              text-align: left;

              color: var(--saas-Placeholder-Text);
            }

            .#{$ns}DateRangePicker-value {
              flex: 1;
              justify-content: left;

              color: var(--saas-Title-Text);
            }

            .#{$ns}DateRangePicker-toggler {
              margin-top: 0;
              color: var(--saas-Placeholder-Text);
            }


          }

          .#{$ns}DateRangePicker:not(.is-disabled):hover .#{$ns}DateRangePicker-toggler {
            color: var(--saas-Placeholder-Text);
          }
        }
      }

      .#{$ns}Form-control {
        font-weight: 500;
        letter-spacing: 0.5px;
        font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
        color: var(--saas-Title-Text);

        .#{$ns}DateField {
          color: var(--saas-Title-Text);
          letter-spacing: 0;
        }

        .#{$ns}ResultBox {
          border: none;
          padding-right: 18px;

          &-clear {
            position: absolute;
            right: 0;

            svg {
              fill: var(--saas-Placeholder-Text);
            }
          }

          &-singleValue {
            color: var(--saas-Title-Text);
          }

          &-placeholder {
            margin-left: 0;
            color: var(--saas-Placeholder-Text);
            font-size: 15px;
            white-space: nowrap;
          }

          .#{$ns}TransferPicker-icon,
          &-arrow {
            position: absolute;
            right: 0px;
          }

          .#{$ns}ResultBox-clear+.#{$ns}ResultBox-arrow {
            right: 18px;
          }

          input {
            padding-left: 0;

            &::-webkit-input-placeholder {
              color: var(--saas-Placeholder-Text);
            }

            &::-moz-placeholder {
              color: var(--saas-Placeholder-Text);
            }

            &::-ms-input-placeholder {
              color: var(--saas-Placeholder-Text);
            }
          }

          &-value-wrap {
            .#{$ns}ResultBox-value {
              white-space: nowrap;
              line-height: 1.5rem;
              padding: 0 6px;

              .#{$ns}ResultBox-valueLabel {
                white-space: nowrap;

                span {
                  white-space: nowrap;
                }
              }
            }
          }
        }

        .#{$ns}DatePicker.is-mobile {
          padding: 0;
          line-height: 24px;
          background: none;

          .#{$ns}DatePicker-content {
            font-size: 15px;
            justify-content: space-between;
            align-items: center;

            .#{$ns}DatePicker-placeholder {
              font-size: 15px;
              color: var(--saas-Placeholder-Text);
            }

            input {
              &::-webkit-input-placeholder {
                color: var(--saas-Placeholder-Text);
              }

              &::-moz-placeholder {
                color: var(--saas-Placeholder-Text);
              }

              &::-ms-input-placeholder {
                color: var(--saas-Placeholder-Text);
              }
            }

            .#{$ns}DatePicker-value {
              // justify-content: flex-end;
              font-weight: 500;
              letter-spacing: 0.5px;
              font-family: system-ui, -apple-system, Helvetica Neue, sans-serif;
              color: var(--saas-Title-Text);
              font-size: 15px;
            }

            .#{$ns}DatePicker-clear {
              >svg {
                fill: var(--saas-Placeholder-Text);
              }
            }

            .#{$ns}DatePicker-toggler {
              color: var(--saas-Placeholder-Text);
              margin-top: 0;
              height: 22px;

              >svg {

                polyline,
                circle {
                  stroke: var(--saas-Placeholder-Text);
                }
              }
            }
          }
        }

        .#{$ns}DateRangePicker.is-mobile {
          .#{$ns}DateRangePicker-content {
            input {
              &::-webkit-input-placeholder {
                color: var(--saas-Placeholder-Text);
                font-size: 14px;
              }

              &::-moz-placeholder {
                color: var(--saas-Placeholder-Text);
                font-size: 14px;
              }

              &::-ms-input-placeholder {
                color: var(--saas-Placeholder-Text);
                font-size: 14px;
              }
            }

            .#{$ns}DateRangePicker-placeholder {
              font-size: 15px;
              color: var(--saas-Placeholder-Text);
            }

            .#{$ns}DateRangePicker-toggler {
              color: var(--saas-Placeholder-Text);
              margin-top: 0;
              margin-right: 4px;
              height: 24px;

              >svg {
                width: 0.625rem;
                height: 0.625rem;

                polyline,
                circle {
                  stroke: var(--saas-Placeholder-Text);
                }
              }
            }
          }
        }

        .#{$ns}DatePicker.is-disabled {
          background: #fff;
        }

        .#{$ns}TextControl-placeholder {
          right: 0;
          left: 0;
          color: var(--saas-Placeholder-Text);
        }
      }

      .#{$ns}SelectControl {
        .#{$ns}Select-arrow {
          >svg {
            color: var(--saas-Placeholder-Text);
          }
        }
      }

      .#{$ns}ColorControl.#{$ns}Form-control {
        .#{$ns}ColorPicker {
          color: var(--saas-Title-Text);

          .#{$ns}ColorPicker-clear {
            >svg {
              fill: var(--saas-Placeholder-Text);
            }
          }
        }

      }

      .#{$ns}ColorControl .#{$ns}Form-hint,
      .#{$ns}Form-remark,
      .#{$ns}Form-static,
      .#{$ns}Form-group--hor .#{$ns}Form-item,
      .#{$ns}SwitchControl,
      .#{$ns}CheckboxControl,
      .#{$ns}RadiosControl,
      .#{$ns}CheckboxesControl {
        padding-top: 0;
        padding-bottom: 0;
      }

      .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
        height: var(--Form-input-height);
      }

      .#{$ns}Form-hint {
        font-size: var(--fontSizeBase);
        margin-left: 0;
        color: var(--text--muted-color);
      }

      .#{$ns}TextControl-placeholder {
        top: 0;
      }

      .#{$ns}Form-static {
        min-height: 0;
        flex: 1;
        color: var(--saas-Title-Text);
      }

      >.#{$ns}Form-static {
        max-width: 70%;
      }

      .#{$ns}Form-description,
      .#{$ns}Form-feedback {
        font-size: var(--fontSizeBase);
      }

      .#{$ns}InputGroup {

        .#{$ns}Select,
        .#{$ns}InputGroup-btn .#{$ns}Button {
          border: none;
        }

        >.#{$ns}TextControl-input input {
          height: var(--Form-input-height);
        }
      }

      .#{$ns}ColorPicker {
        padding: 0;
        border: none;

        .#{$ns}ColorPicker-arrow {
          display: none;
        }

        .#{$ns}ColorPicker-input {
          &::-webkit-input-placeholder {
            color: var(--saas-Placeholder-Text);
          }

          &::-moz-placeholder {
            color: var(--saas-Placeholder-Text);
          }

          &::-ms-input-placeholder {
            color: var(--saas-Placeholder-Text);
          }
        }

      }

      .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
        margin-bottom: var(--gap-xs);
      }

      .#{$ns}TextareaControl>textarea,
      .#{$ns}Form-control>.#{$ns}TextControl-input,
      .#{$ns}TextControl.is-focused>.#{$ns}TextControl-input {
        border: none;
        padding: 0 var(--Form-input-paddingX) 0 0;
        box-shadow: none;

        &:hover,
        &:focus,
        &.active {
          border: none;
          outline: none;
          outline-style: none;
        }
      }

      .#{$ns}TextareaControl>textarea {
        color: var(--saas-Title-Text);
        font-size: 15px;
        line-height: 24px;
      }

      .#{$ns}TextareaControl.is-readOnly>textarea {
        color: var(--Form-down-input-noteditable);
      }

      .#{$ns}Form-control>.#{$ns}TextControl-input {
        padding: 0;
        background-color: none;
        background: none;
      }

      .#{$ns}Form-control>.#{$ns}TextControl-input--multiple {
        padding: 0;
        min-height: 0;
      }

      .#{$ns}Form-rowInner {
        width: 100%;
      }
    }

    >.#{$ns}CollapseGroup {
      .#{$ns}Collapse {
        .#{$ns}Collapse-body {
          padding: 0;
        }
      }
    }

    .#{$ns}Collapse {
      border-bottom: 0;
    }

    .#{$ns}Form-item.view-details {
      color: var(--saas-Title-Text);
      padding: 16px !important;
      height: auto;

      .#{$ns}Form-value,
      .#{$ns}Form-control {
        text-align: left;
        font-size: 15px;
      }

      .#{$ns}Form-static {
        text-align: left;

        .#{$ns}Form-value,
        .#{$ns}Form-control {
          text-align: left;
          font-size: 15px;
          color: var(--saas-Title-Text);

          .#{$ns}PlainField {
            white-space: initial;
          }

          .#{$ns}DateField {
            color: var(--Form-down-input-noteditable);
          }

          .#{$ns}Mapping {
            overflow: initial;
            white-space: initial;
          }
        }
      }

      >.#{$ns}Form-label {
        color: var(--saas-Placeholder-Text);
        padding-right: 16px;
      }

      .#{$ns}Form-rowInner {
        .#{$ns}Form-label {
          color: var(--saas-Placeholder-Text);
          padding-right: 16px;

          .#{$ns}Form-star {
            font-size: 12px;
            display: flex;
            align-items: center;
            position: absolute;
            left: -10px;
            color: red;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .#{$ns}DateRangePicker {
          color: var(--saas-Title-Text);
        }
      }

      .#{$ns}TextControl-input {
        input {
          color: var(--saas-Title-Text);
        }
      }

      .#{$ns}Form-value,
      .#{$ns}Form-control {
        .#{$ns}Select.is-mobile {
          .#{$ns}Select-valueWrap {
            color: var(--saas-Title-Text);
          }
        }

        .#{$ns}Number {

          .#{$ns}Number-input {
            color: var(--saas-Title-Text);
          }
        }

        .#{$ns}Number-disabled {
          .#{$ns}Number-input {
            color: var(--Form-down-input-noteditable);
          }
        }
      }

      .#{$ns}Form-control {
        color: var(--saas-Title-Text);

        .#{$ns}DatePicker.is-mobile {
          .#{$ns}DatePicker-content {
            .#{$ns}DatePicker-value {
              color: var(--saas-Title-Text);
            }
          }
        }

        .#{$ns}TextControl-placeholder {
          right: 0;
        }
      }


      .#{$ns}SwitchControl {
        text-align: left;
      }
    }

    .#{$ns}Form-item.is-linkUrl {
      .#{$ns}Form-control {
        color: #4f86f4;
      }
    }

    .#{$ns}Form-item.verticalField {
      padding: 16px 0 !important;
      height: auto;

      &::before {
        left: 0;
      }

      @include media-breakpoint-down(sm) {
        margin-top: 8px;
        margin-bottom: 8px;
      }
    }

    .#{$ns}Form-item.horizonField {
      @include media-breakpoint-down(sm) {
        margin-top: 8px;
        margin-bottom: 8px;

        .#{$ns}Form-label {
          width: 100%;
          max-width: 100% !important;
          flex: 1 !important;
        }
      }
    }

    .#{$ns}Form-groupColumn {
      margin-bottom: 0;
    }

    .#{$ns}Divider {
      display: none;
    }

    .#{$ns}Tabs-pane {
      padding: 0;
    }

    >.#{$ns}Form-item {

      &:last-child::after,
      &:last-of-type::after {
        display: none;
      }
    }

    .#{$ns}Form-item .#{$ns}Form-groupColumn>.#{$ns}Form-item {
      padding-bottom: var(--Form-input-paddingX);
    }

    .#{$ns}Form-item.view-details {
      padding: 3px 0;

      &::after {
        content: none;
      }

      >.#{$ns}Form-label {
        >span {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;

          .#{$ns}TplField {
            display: block;
            max-width: 100%;

            >span {
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .#{$ns}Static-Html-TplOpen {
            color: var(--Form-down-input-noteditable);
            max-height: 67.5px;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
          }
        }
      }
    }

    .#{$ns}Alert {
      margin-top: var(--Alert-paddingX)
    }

    .#{$ns}Form-item.#{$ns}Form-item--row {
      height: auto;
      flex-wrap: wrap;

      >.#{$ns}Form-feedback {
        padding-left: 30%;
      }

      .#{$ns}Form-rowInner {
        display: flex;
        flex-wrap: wrap;

        .#{$ns}Form-label {
          flex: 0 0 30%;
          max-width: 112px;
          min-width: 112px;
          margin-bottom: 0;

          span {
            min-height: 24px;
            width: 100%;
          }

          .#{$ns}Form-star {
            font-size: 12px;
            display: flex;
            align-items: center;
            position: absolute;
            left: -10px;
            color: red;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .#{$ns}DateRangeControl {
          .#{$ns}DateRangePicker {
            .#{$ns}DateRangePicker-content {
              white-space: initial;
              justify-content: space-between;
              align-items: center;

              .#{$ns}DateRangePicker-placeholder {
                color: var(--saas-Placeholder-Text);
              }

              .#{$ns}DateRangePicker-value {
                color: var(--saas-Title-Text);
              }

              .#{$ns}DateRangePicker-toggler {
                >svg {

                  polyline,
                  circle {
                    stroke: var(--saas-Placeholder-Text);
                  }
                }
              }

              .#{$ns}DateRangePicker-clear {
                svg {
                  fill: var(--saas-Placeholder-Text);
                }
              }

              .#{$ns}Table-expandBtn {
                color: var(--saas-Placeholder-Text);
              }
            }
          }
        }

        .#{$ns}ImageControl {
          overflow: hidden;

          .#{$ns}ImageControl-dropzone {
            width: 100%;
            height: 100%;

            .#{$ns}ImageControl-addBtn {
              color: rgba(0, 0, 0, .2);
            }

            .#{$ns}ImageControl-addBtn:not(:disabled):not(.is-disabled):hover {
              color: var(--ImageControl-addBtn-onHover-color);
              background: transparent;
              border-color: transparent;
            }

          }
        }

        .#{$ns}InputTable {
          width: 100%;
          flex: auto;

          .#{$ns}Table .#{$ns}Table-horizontal {
            min-height: 200px;
          }

          .empty-container {
            color: rgba($color: #000000, $alpha: .4);
          }
        }

        .#{$ns}TextareaControl {
          &>textarea[disabled] {
            background: #fff;
          }

          &-TextArea {
            height: 100%;
            color: var(--saas-Title-Text);
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-original {
              max-height: 67.5px;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              display: -webkit-box;
              padding-right: 8px;
              white-space: nowrap;
            }

            .#{$ns}Table-expandBtn {
              color: var(--saas-Placeholder-Text);
              width: 16px;
              overflow: hidden;
              display: inline-flex;
              align-items: center;
              height: 100%;
            }

          }

          .#{$ns}TextAreaControl-notReadOnly {
            color: var(--saas-Placeholder-Text);
          }

          &.is-readOnly {
            .#{$ns}TextareaControl-TextArea {
              color: var(--Form-down-input-noteditable);
            }
          }

          textarea {
            &::-webkit-input-placeholder {
              color: var(--saas-Placeholder-Text);
            }

            &::-moz-placeholder {
              color: var(--saas-Placeholder-Text);
            }

            &::-ms-input-placeholder {
              color: var(--saas-Placeholder-Text);
            }
          }

        }

        >.#{$ns}Form-static {
          flex: 0 0 70%;
          max-width: calc(100% - 112px);
          overflow: hidden;
        }
      }
    }

    .#{$ns}Form-item.dateRangeFormItem {
      align-items: flex-start;

      .#{$ns}Form-label {
        >span {
          align-items: flex-start;

          >span.#{$ns}TplField {
            display: inline-block;
            height: 24px;
            line-height: 24px;
          }
        }
      }
    }
  }

  form.#{$ns}Form,
  .#{$ns}Form.row-edit-form {
    background-color: var(--saas-Background-Header);
    padding-top: 8px;

    &.hasFieldSet {
      margin-top: 0;
    }

    &.inModal {
      background-color: var(--saas-Background-Header);
      padding-top: 0px;
    }

    .#{$ns}Form-item {
      // margin-bottom: 1px;
      padding: 16px !important;
      margin-right: 0;
    }

    .#{$ns}Alert {
      margin-left: 8px;
      margin-right: 8px;
    }

    .#{$ns}Form-item:nth-last-child(1) {
      &::before {
        content: none;
      }
    }
  }
}

/**
  * Aug -- 组件大小 --start
 */
.#{$ns}Form--format-sm {
  font-size: var(--fontSizeSm);
  line-height: var(--Form-input-lineHeight-sm);

  .#{$ns}Form-label {
    margin-bottom: 2px;
    font-size: var(--fontSizeSm);
  }

  .#{$ns}Form-item {
    margin-bottom: var(--gap-sm);
  }

  .#{$ns}Form-description {
    margin-top: 2px;
  }

  .#{$ns}Form-static {
    min-height: var(--Form-input-height-sm);
  }

  .#{$ns}Form-feedback {
    margin-top: 2px;
  }
}

.#{$ns}Form--format-xs {
  font-size: var(--fontSizeXs);
  line-height: var(--Form-input-lineHeight-xs);

  .#{$ns}Form-label {
    margin-bottom: 0;
    font-size: var(--fontSizeXs);
  }

  .#{$ns}Form-item {
    margin-bottom: var(--gap-xs);
  }

  .#{$ns}Form-description {
    margin-top: 0;
  }

  .#{$ns}Form-static {
    min-height: var(--Form-input-height-xs);
  }

  .#{$ns}Form-feedback {
    font-size: var(--fontSizeXs);
    margin-top: 0;
  }
}

@include media-breakpoint-up(sm) {
  .#{$ns}Form--format-xs {
    .#{$ns}Form-item--horizontal>* {
      padding-left: 2px;
      padding-right: 2px;
    }
  }

  .#{$ns}Form--format-sm {
    .#{$ns}Form-item--horizontal>* {
      padding-left: 4px;
      padding-right: 4px;
    }
  }
}

/**
  * Aug -- 组件大小 --end
 */

//  Jay
.advanced-filter-row {
  min-height: 34px;
  align-items: center;

  .#{$ns}Form-item {
    margin-bottom: 0px;
  }

  &>.ant-col {
    .ant-select {
      width: 100%;
    }

    .ant-select-selector {
      height: 30px;

      @media screen and (min-width: 1280px) and (max-width: 1440px) {
        height: 1.2rem;
      }

      .ant-select-selection-item {
        line-height: 28px;

        @media screen and (min-width: 1280px) and (max-width: 1440px) {
          line-height: 1.2rem;
          font-size: 0.75rem;
        }
      }
    }

    .condition {
      position: relative;
      top: 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      user-select: none;
      background: #06d6a0;

      &.or {
        background: #feb60a;
      }

      &.not {
        background: #aaa;
      }

      @media screen and (min-width: 1280px) and (max-width: 1440px) {
        top: 0;
      }
    }

    .fa-minus-square-o {
      position: relative;
      top: 3px;
      font-size: 16px;
      cursor: pointer;

      &.not {
        color: #ccc;
      }
    }

    &>.#{$ns}Select {
      display: flex;
    }

    .#{$ns}Form-item,
    .#{$ns}Form-value,
    .#{$ns}Form-control {
      width: 100%;
    }

    .double {
      display: flex;

      .#{$ns}Form-item:last-child {
        margin-right: 0;
      }
    }
  }
}