@import (reference) '~antd/lib/style/themes/index';

.sula-form-action {
  &-right {
    .formActionPosition(flex-end);
  }

  &-landscape {
    display: flex;
    align-items: center;
    justify-content: left;
    order: 1;
  }

  &-center {
    .formActionPosition(center);
  }

  &-bottom {
    .formActionPosition(flex-end);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9; // siderMenu need >= 10
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background-color: @card-background;
    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.03);
  }

  // &-vertical {
  //   &-middle {
  //     margin-top: 30px;
  //   }
  //   &-small {
  //     margin-top: 32px;
  //   }
  //   &-large {
  //     margin-top: 48px;
  //   }
  // }
}

.formActionPosition(@position) {
  display: flex;
  align-items: center;
  justify-content: @position;
}

.sula-form.edit-form {
  .ant-form-item-explain {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .ant-picker {
    width: 100%;
  }

  textarea.ant-input {
    font-size: 12px;
    height: 24px;
  }

  // 公共样式
.ant-form-item-control-input-content {
  padding: 0;

  input.ant-input {
    height: 22px;
  }

  .ant-input-affix-wrapper {
    padding: 0 11px;
  }
}
}

// 查看模式下的表单样式【无card】
.view-form {
  .ant-form-item-label > label {
    color: #8c8e91;
  }

  .left-sort-form-item {
    display: flex;
    margin-bottom: 4px;

    .sula_form_view_page_filed {
      width: auto;
    }
  }

  .ant-form-item-control-input {
  }

  .ant-form-item-control-input-content {
  }

  & > div.ant-card-body {
    margin-bottom: 8px;
    padding: 16px;
  }
}

// 多card表单页面
.bitsun-form-class.view-form {
  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-form-item-control-input {

    .sula_form_view_page_filed {
      color: rgba(44, 47, 46, 0.85);
    }
  }

  .ant-form-item-label {
  }

  .ant-form-item-label > label {
    color: #8c8e91;
  }
}

.bitsun-form-class.ant-form {
  margin-bottom: 55px;
}

.bitsun-form-class {
  padding: 10px;
  .sula-form-action-bottom {
    height: 48px;
    box-shadow: 0 -4px 8px 0 rgba(215, 215, 215, 0.5);
    .ant-space {
      gap: 20px;
    }
    button {
      height: 28px;
    }
  }

  .ant-form-item-label > label {
    color: #292929;
    font-family: PingFangSC;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 24px;
    line-height: 24px;
    padding-right: 10px;
    position: relative;
    vertical-align: middle;
  }

  .ant-form-item-label > label::after {
    content: ':';
    position: relative;
    top: -0.5px;
    right: -5px;
    margin: 0 8px 0 2px;
    position: absolute;
  }
}

.white-card.bitsun-form-card-class {
  .ant-form-item {
    margin-right: 0px !important;
  }
}

.bitsun-form-card-class {
  & > div.ant-card-body {
    margin-bottom: 8px;
    padding: 8px 10px;
  }
}

.tables-detail-formpage {
  .ant-form-item {
    margin-right: 0 !important;
  }

  .ant-tabs-top > .ant-tabs-nav,
  .ant-tabs-bottom > .ant-tabs-nav,
  .ant-tabs-top > div > .ant-tabs-nav,
  .ant-tabs-bottom > div > .ant-tabs-nav {
    margin: 0 0 5px 0;
  }
  
  .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-ink-bar {
    display: none;
  }

  .ant-tabs.ant-tabs-top {
    float: left;
    margin-top: -40px;
    width: 100%;

    .ant-tabs-nav {
      position: relative;
      padding-left: 110px;
    }

    .ant-tabs-nav, .ant-tabs-tab {
      height: 28px;
      line-height: 28px;
    }

    .ant-tabs-tab {
      margin: 0px;
      padding: 0 20px;
      border: 1px solid #E4E4E4;
      margin-right: -1px;
    }
  }
}

.bitsun-form-card-class {
  // 公共样式
  .ant-card-head {
    min-height: 36px;
    padding: 0px;
    border: 0px;
    border-bottom: 1px solid #f0f0f0;
  }

  .ant-card-body {
    padding: 10px;
  }

  .ant-card-head-title {
    position: absolute;
    top: 0px;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 36px;
    margin: 0px;
    padding: 8px 0;
    color: #000000;
    font-weight: 600;
    font-size: 14px;
    font-family: PingFangSC;

    .title-left-line {
      display: inline-block;
      width: 4px;
      height: 20px;
      height: 100%;
      margin-right: 6px;
      margin-left: 10px;
      background-color: #005cff;
    }
  }
}

.bitsun-form-card-class.ant-card-bordered {
  margin-bottom: 8px;
  background-color: #ffffff;
  border: 0px;
  border-radius: 5px;
}

.field-group-hidden {
  .ant-card-body {
    display: none !important;
  }
}

.container-button {
  display: inline-block;
  min-width: 88px;
  height: 24px;
  padding: 0 5px;
  color: #000000;
  font-size: 12px;
  line-height: 24px;
  vertical-align: middle;
  border: 1px solid #e1e2e3;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  cursor: pointer;
}

.bitsun-form-tabs-class {
  margin-top: -20px !important; // card的黑边，会被global.less覆盖所以用important
  background-color: #ffffff;
}

.bitsun-form-tabpane-class {
  padding-top: 12px;
  background-color: #f3f3f3;
}

.form-guide {
  position: fixed;
  top: 50%;
  right: 5px;
  z-index: 10;
  width: 48px;
  padding: 5px 0;
  color: #b1bad4;
  background-color: #141620;
  border-radius: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  .form-guide-top {
    display: flex;
    justify-content: center;
    padding: 0px 10px;
  }
  .form-guide-center {
    padding: 0px 10px;
    border-top: 1px solid #6e7588;
    border-bottom: 1px solid #6e7588;
  }
  .form-guide-item {
    position: relative;
    display: block;
    width: 28px;
    padding: 5px 0;
    color: #b1bad4;
    line-height: 16px;
    word-break: break-all;
  }
  .form-guide-item::after {
    position: absolute;
    bottom: 0px;
    left: 7px;
    display: block;
    width: 15px;
    height: 1px;
    background-color: #6e7588;
    content: '';
  }

  .form-guide-bottom {
    display: flex;
    justify-content: center;
    padding: 5px 10px;
  }
  .form-guide-item:last-child::after {
    position: absolute;
    bottom: 0px;
    left: 7px;
    display: none;
    width: 15px;
    height: 1px;
    background-color: #6e7588;
    content: '';
  }
}

.form-status-label {
  height: 28px;
  margin-right: 12px;
  // flex-grow: 1;
  // flex-shrink: 1;
  display: inline-block;
  position: relative;
  background-color: #B0B4B7;
  align-items: center;
}
.choosed-status-label.form-status-label {
  background-color: #005CFF;
}

.form-status-label:last-child {
  margin-right: 0px;
}

.form-status-label:first-child::after {
  position: absolute;
  display: block;
  content: '';
  right: -28px;
  top: 0;
  width: 28px;
  height: 28px;
  border: 14px solid;
  border-color: transparent transparent transparent transparent;
  border-left: 12px solid #B0B4B7;
}

.choosed-status-label.form-status-label::after {
  border-left: 12px solid #005CFF;
}

.choosed-status-label.form-status-label:not(:first-child):not(:last-child)::after {
  border-left: 12px solid #005CFF;
}

.form-status-label:last-child::after {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 14px solid;
  border-color: transparent transparent transparent transparent;
  border-left: 12px solid #ffffff;
}

.form-status-label:first-child {
  padding-left: 10px;
}

.form-status-label:not(:first-child) {
  padding-left: 20px;
}

.form-status-label:not(:first-child):not(:last-child)::before {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 14px solid;
  border-color: transparent transparent transparent transparent;
  border-left: 12px solid #ffffff;
}

.form-status-label:not(:first-child):not(:last-child)::after {
  position: absolute;
  display: block;
  content: '';
  right: -28px;
  top: 0;
  width: 28px;
  height: 28px;
  border: 14px solid;
  border-color: transparent transparent transparent transparent;
  border-left: 12px solid #B0B4B7;
}

.status-label-index {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  border-radius: 50%;
  font-family: Montserrat;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  margin: 0 6px 0 20px;
}

.status-label-key {
  width: auto;
  height: 100%;
  display: inline-flex;
  float: left;
  // flex-grow: 0;
  // flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}

.choosed-status-label .status-label-operate {
  border-left: 1px solid #FFFFFF;
}

.status-label-operate {
  // flex-grow: 1;
  // flex-shrink: 1;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 12px;
  margin: 8px 0;
  margin-left: 8px;
  padding-left: 8px;
  font-size: 10px;

  &>div {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    color: #FFFFFF95;
    font-family: PingFangSC;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &>div:first-child {
    font-size: 10px;
    font-weight: 400;
  }
}

.only-one-child.form-status-label::after,.only-one-child.form-status-label::before {
  border-left: 0px;
}

.sula-form {
  .sula-field-select {
    div.ant-select-selector {
      height: 24px;
      overflow: hidden;
    }
    div.ant-select-selection-overflow {
      height: 40px;
      flex-wrap: nowrap;
      overflow-x: auto;

      .ant-select-selection-overflow-item {
        align-self: auto;
        &:nth-child(1) {
          flex-shrink: 1;
          max-width: calc(100% - 55px);
        }

        &.ant-select-selection-overflow-item-rest {
          flex-basis: content;
          flex-shrink: 0;
          min-width: 55px;
        }
      }
    }
  }
}