@import '../global.scss';

// FormItem 样式重写
.#{$form-item-cls} {
  // 标签加粗 主题颜色
  .#{$form-item-cls}-label label {
    color: var(--form-label-color, #333333);
    font-weight: var(--font-weight-medium, 500);
  }

  // 溢出label样式
  .#{$form-item-cls}-label-tooltip {
    label {
      border: 0;
    }
    * {
      cursor: default;
    }
  }

  // 不撑满
  > .#{$form-item-cls}-control {
    > .#{$form-item-cls}-control-content {
      > .#{$form-item-cls}-control-content-component {
        width: auto;
      }
    }
  }

  // 行高 todo 根据size配置
  > .#{$form-item-cls}-control {
    > .#{$form-item-cls}-control-content {
      > .#{$form-item-cls}-control-content-component {
        line-height: initial;
        > .#{$teamix-pro-field}-checkbox,
        .#{$teamix-pro-field}-radio,
        .#{$teamix-pro-field}-switch,
        .#{$teamix-pro-field}-colorradio,
        .#{$teamix-pro-field}-range {
          line-height: var(--form-element-medium-height, 32px);
        }
        > .#{$css-prefix}btn-text {
          width: auto;
        }
      }
    }
  }

  // 预览态行高
  .#{$css-prefix}form-preview {
    line-height: var(--form-element-medium-height, 32px);
  }

  // 星号重写
  .#{$form-item-cls}-asterisk {
    display: none;
  }
  .#{$form-item-cls}-asterisk-pro::after {
    margin-left: 4px;
    font-family: Verdana;
    content: '*';
    color: var(--color-error-5, #e84738);
    position: relative;
    top: 2px;
  }
  .#{$form-item-cls}-help {
    margin-top: 2px;
    line-height: 18px;
  }
  .#{$form-item-cls}-extra {
    margin: 2px 0;
    line-height: 18px;
  }
  .#{$form-item-cls}-colon {
    margin-left: 4px;
    margin-right: 12px;
  }

  // info图标颜色
  .#{$form-item-cls}-label-tooltip-icon {
    color: var(--color-text1-8, #848484);
    &:hover {
      color: var(--color-text1-2, #5a5a5a);
    }
  }

  // 帮助和反馈颜色
  .#{$form-item-cls}-help,
  .#{$form-item-cls}-extra {
    color: var(--color-text1-8, #848484);
  }
  .#{$form-item-cls}-error-help {
    color: var(--color-error-5, #e84738);
  }

  // 前缀 后缀
  .#{$form-item-cls}-control {
    .#{$form-item-cls}-control-content {
      .#{$form-item-cls}-addon-before {
        margin-right: 16px;
        color: var(--color-text1-8, #848484);
      }
      .#{$form-item-cls}-addon-after {
        margin-left: 16px;
        color: var(--color-text1-8, #848484);
      }
    }
  }
}

// 尺寸 - small
.#{$form-item-cls}-size-small {
  // 预览态行高
  .#{$teamix-pro-field} {
    .#{$css-prefix}form-preview {
      line-height: var(--form-element-small-height, 24px);
    }
  }
}
// 尺寸 - large
.#{$form-item-cls}-size-large {
  // 预览态行高
  .#{$teamix-pro-field} {
    .#{$css-prefix}form-preview {
      line-height: var(--form-element-large-height, 36px);
    }
  }
}

// Icon
.#{$css-prefix}formily-icon {
  transform: translate(0, -1px);
}

// 撑满模式
.#{$form-item-cls}-fullness {
  > .#{$form-item-cls}-control {
    > .#{$form-item-cls}-control-content {
      > .#{$form-item-cls}-control-content-component {
        width: 100%;
        > *:first-child {
          width: 100%;
        }
      }
    }
  }
}

// 内嵌模式 - 行高
.#{$form-item-cls}-inset {
  line-height: $inset-font-weight-medium;
  .#{$form-item-cls}-label-content {
    min-height: $inset-font-weight-medium;
  }
  .#{$form-item-cls}-control {
    .#{$form-item-cls}-control-content {
      .#{$form-item-cls}-control-content-component {
        min-height: $inset-font-weight-medium;
        .#{$css-prefix}input.#{$css-prefix}medium,
        .#{$css-prefix}date-picker2-input.#{$css-prefix}date-picker2-input-medium {
          height: $inset-font-weight-medium;
          line-height: $inset-font-weight-medium;
        }
        .#{$css-prefix}select-multiple {
          .#{$css-prefix}input.#{$css-prefix}medium {
            height: auto;
          }
        }
      }
    }
  }
}
// 内嵌模式 - 基础
.#{$form-item-cls}-inset {
  .#{$form-item-cls}-label {
    .#{$form-item-cls}-label-content {
      label {
        color: var(--color-text1-8, #848484);
        font-weight: normal;
      }
    }
    .#{$form-item-cls}-colon {
      margin-right: 4px;
    }
  }
  .#{$teamix-pro-field}-money button,
  .#{$teamix-pro-field}-icon button {
    border: 0 !important;
  }
  .#{$teamix-pro-field}-color-swatch {
    box-shadow: none !important;
  }
  .#{$css-prefix}date-picker2-input,
  .#{$css-prefix}date-picker2-input-range {
    border: 0 !important;
    box-shadow: none !important;
  }
  .#{$css-prefix}input-group {
    border: 0;
  }
  .#{$css-prefix}input-group-addon {
    .#{$css-prefix}btn {
      border: 0;
    }
  }
  .#{$css-prefix}input-control:last-child {
    padding-right: 0;
  }
}

// Editable预览态行高
.#{$css-prefix}formily-editable-content {
  line-height: var(--form-element-medium-height, 32px);
}

// 折叠面板
.#{$css-prefix}formily-collapse {
  .#{$css-prefix}collapse-panel-title {
    .#{$css-prefix}badge-count {
      transform: translateX(4px);
    }
  }
}
.#{$css-prefix}formily-collapse,
.#{$form-array}-collapse-item {
  .#{$css-prefix}collapse-panel-hidden {
    .#{$css-prefix}collapse-panel-content {
      padding-top: 4px;
      padding-bottom: 0;
    }
  }
  .#{$css-prefix}collapse-panel-content {
    padding-top: 20px;
    padding-bottom: 0;
  }
}

// 按钮样式
.teamix-button-group-item.#{$form-item-cls}-layout-vertical {
  > .#{$css-prefix}formily-item-label {
    display: none;
  }
}
.#{$css-prefix}formily-button-group {
  margin-top: var(--form-element-medium-height, 32px);
}

.#{$form-item-cls} {
  .#{$css-prefix}formily-button-group {
    margin-top: 12px;
  }
}

// 抽屉按钮
.#{$css-prefix}drawer-footer {
  .#{$css-prefix}formily-button-group {
    margin-top: 0;
  }
}
.#{$teamix-pro-form}-button-affix-auto.#{$css-prefix}affix,
.#{$teamix-pro-form}-button-affix-always.#{$css-prefix}affix {
  left: 0;
  right: 0;
  width: 100% !important;
  height: 56px !important;
  background: var(--color-fill1-1, #fff) !important;
  box-shadow: 0 -1px 5px 0 rgba(38, 38, 38, 0.14);
  z-index: 2;
}
.#{$teamix-pro-form}-button-affix-always.#{$css-prefix}affix {
  bottom: 0 !important;
}

// FormStep
.#{$css-prefix}formily-step {
  .#{$css-prefix}step {
    margin-bottom: var(--form-element-medium-height, 32px) !important;
  }
}

// ArrayItems
.#{$form-array}-items {
  .#{$css-prefix}formily-grid-layout {
    > div:last-child {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.#{$form-array}-base-remove,
.#{$form-array}-base-addition,
.#{$form-array}-base-move-down,
.#{$form-array}-base-move-up,
.#{$form-array}-base-sort-handle,
.form-array-base-icon {
  color: var(--color-fill1-6, #848484);
  &:hover {
    color: var(--color-brand1-6, #0064c8);
  }
}
.form-array-base-icon {
  cursor: pointer;
}
// 数组类组件添加按钮
.#{$css-prefix}btn.#{$form-array}-base-addition {
  border-style: dashed;
  .#{$css-prefix}formily-icon {
    margin-right: 4px;
  }
}
.#{$form-array}-items {
  .#{$form-item-cls}-control-content-component {
    > .#{$css-prefix}btn-text.#{$form-array}-base-addition {
      line-height: var(--form-element-medium-height, 32px);
    }
  }
}

// ArrayCard
.#{$form-array}-cards-item {
  .#{$css-prefix}card-head {
    padding: 16px 20px;
    background-color: var(--color-fill1-2, #f7f7f7);
    .#{$css-prefix}card-head-main {
      margin-top: 0;
      border-bottom: 0;
      height: 22px;
      line-height: 22px;
      .#{$css-prefix}card-title {
        padding-left: 0;
        &::before {
          display: none;
        }
      }
    }
  }
}

// ArrayTable
.#{$form-array}-table {
  &-status-select {
    display: none;
  }
  .#{$css-prefix}formily-item:not(.#{$form-item-cls}-feedback-layout-popover) {
    .#{$form-item-cls}-help {
      z-index: 2 !important;
    }
  }
}

// SelectTable
.#{$teamix-pro-form}-select-table-column-tree
  > .#{$css-prefix}table-cell-wrapper {
  display: flex;
  align-items: center;
}

// todo 此处做覆盖，formily改为变量后可移除
.#{$form-array}-items-card {
  border-color: var(--card-border-color, #eaeaea);
  background: var(--card-background, #ffffff);
  .#{$css-prefix}formily-item:not(.#{$css-prefix}formily-item-feedback-layout-popover) {
    .#{$css-prefix}formily-item-help {
      background: var(--card-background, #ffffff);
      box-shadow: 0 0 10px var(--card-border-color, #eaeaea);
    }
  }
}

/* hack todo remove */
.#{$form-item-cls}-control-content-component {
  .#{$teamix-pro-field}-tooltip.#{$teamix-pro-field}-checkbox {
    .teamix-pro-lable-icon-tip-icon {
      transform: translate(0px, 4px);
    }
  }
}

// inset 内嵌模式描述文案和校验样式修改
.#{$form-item-cls}-inset {
  // 描述+校验
  &.#{$form-item-cls}-feedback-has-text.#{$form-item-cls}-extra-wrap {
    margin-bottom: 42px;
    .#{$form-item-cls}-error-help {
      position: absolute;
      left: 0px;
    }
    .#{$form-item-cls}-extra {
      position: absolute;
      bottom: -40px;
      left: 0px;
    }
  }
  // 描述
  &.#{$form-item-cls}-extra-wrap {
    margin-bottom: 40px;
    .#{$form-item-cls}-extra {
      position: absolute;
      left: 0px;
    }
  }
  // 校验
  &.#{$form-item-cls}-feedback-has-text {
    margin-bottom: 40px;
    .#{$form-item-cls}-error-help {
      position: absolute;
      left: 0px;
    }
  }
}