// 自定义 -----------------------

.el-input-group__append {
  padding: 0 12px;
}

.el-popper {
  &.sa-popper {
    min-width: unset;
    width: fit-content !important;
  }
}

.el-alert {
  &.sa-alert {
    --el-alert-padding: 12px 36px 12px 12px;
    --el-alert-title-font-size: 14px;
    background-color: var(--el-color-warning-light-9);
    color: var(--el-color-warning);

    .el-alert__title {
      div {
        line-height: 16px;
      }
    }

    .el-alert__close-btn {
      font-size: 16px;
      color: var(--sa-font);
    }
  }
}

.el-form {
  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea {
    width: 100%;
    max-width: 360px;
  }
  .el-form-item__label-auto {
    .el-form-item__label {
      width: auto !important;
    }
  }
  .el-form-item--label-right {
    .el-form-item__label {
      font-size: 12px;
    }
  }

  .tip {
    width: fit-content;
    line-height: 16px;
    font-size: 12px;
    color: var(--sa-subfont);
  }

  .warning {
    line-height: 16px;
    font-size: 12px;
    color: var(--el-color-warning);
  }

  @media screen and (max-width: 992px) {
    .el-form-item {
      display: block;
      .el-form-item__label {
        display: block;
        text-align: left;
      }
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
    .el-form-item--label-right {
      // .el-form-item__content {
      //   flex-wrap: nowrap;
      // }
      // .el-form-item {
      //   display: flex;
      //   .el-form-item__label {
      //     display: block;
      //     text-align: left;
      //   }
      // }
    }
  }
}

.el-tabs {
  &.sa-tabs {
    --el-tabs-header-height: 56px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: calc(100% + 32px);
      height: 1px;
      background-color: var(--el-border-color-light);
      z-index: var(--el-index-normal);
      margin-left: -16px;
      margin-right: -16px;
    }
    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 56px;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
    .el-tabs__header {
      margin: 0;
    }
  }
}

.el-header {
  &.sa-header {
    --el-header-padding: 0;
    --el-header-height: auto;
  }
}
.sa-dialog {
  .sa-header {
    --el-header-padding: 0 20px;
  }
}

.el-main {
  .sa-tabs--banner {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.sa-footer {
  &--submit {
    width: 100%;
    --el-footer-height: auto !important;
    padding: 7px var(--sa-padding) 16px !important;
    border-top: 1px solid var(--sa-space);
    background: var(--sa-background-assist);
    text-align: right !important;
  }
}

.el-table {
  &.sa-table {
    --el-table-border-color: transparent;
    --el-table-header-bg-color: var(--sa-table-header-bg); // sa
    width: 100%;
  }
}

.el-dialog {
  &.sa-dialog {
    --el-dialog-width: 800px;
    --el-dialog-margin-top: 0;
    --el-dialog-title-font-size: var(--el-font-size-medium);
    --el-dialog-padding-primary: 0;
    --el-dialog-border-radius: 8px;
    max-height: 70vh;
    margin: 15vh auto;
    color: var(--sa-title);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .el-dialog__header {
      height: 44px;
      line-height: 44px;
      padding: 0 var(--sa-padding);
      margin: 0;
      border-bottom: 1px solid var(--sa-border);

      .title {
        span {
          width: fit-content;
          line-height: 1;
          padding: 0 2px;
          position: relative;
          z-index: 0;

          &:after {
            pointer-events: none;
            content: '';
            position: absolute;
            height: 8px;
            background: var(--t-bg-active);
            bottom: 0;
            right: 0;
            left: 0;
            z-index: -1;
          }
        }
      }

      .tools-wrap {
        height: 43px;
        position: absolute;
        top: 0;
        right: var(--sa-padding);
        cursor: pointer;

        > div {
          width: 20px;
          height: 20px;
          border-radius: 50%;

          &:hover {
            color: var(--sa-background-assist);
            background: var(--el-color-primary);
          }
        }
      }
    }

    .el-dialog__body {
      flex: 1;
      display: flex;
      overflow: hidden;

      .sa-view-bar {
        box-shadow: none;
        border-top: 1px solid var(--sa-space);
      }
    }

    &.is-fullscreen {
      --el-dialog-width: 100%;
      --el-dialog-border-radius: 0;
      max-height: 100%;
      margin: 0;
    }
  }
}

// 兼容手机端
@media only screen and (max-width: 768px) {
  .el-message {
    --el-message-min-width: 90%;
  }

  .el-message-box {
    --el-messagebox-width: 90%;
  }

  // 手机端 取消table右侧悬浮
  .el-table {
    &.sa-table {
      .el-table__body-wrapper tr td.el-table-fixed-column--left,
      .el-table__body-wrapper tr td.el-table-fixed-column--right,
      .el-table__body-wrapper tr th.el-table-fixed-column--left,
      .el-table__body-wrapper tr th.el-table-fixed-column--right,
      .el-table__footer-wrapper tr td.el-table-fixed-column--left,
      .el-table__footer-wrapper tr td.el-table-fixed-column--right,
      .el-table__footer-wrapper tr th.el-table-fixed-column--left,
      .el-table__footer-wrapper tr th.el-table-fixed-column--right,
      .el-table__header-wrapper tr td.el-table-fixed-column--left,
      .el-table__header-wrapper tr td.el-table-fixed-column--right,
      .el-table__header-wrapper tr th.el-table-fixed-column--left,
      .el-table__header-wrapper tr th.el-table-fixed-column--right {
        position: inherit !important;
      }
    }
  }

  // 全屏
  .el-dialog {
    &.sa-dialog {
      --el-dialog-width: 100vw !important;
      --el-dialog-border-radius: 0;
      max-height: 100vh;
      height: 100vh;
      margin: 0;
    }
  }

  // 抽屉width=100%
  .el-drawer {
    &.sa-drawer {
      width: 100% !important;
    }
  }
}

// 修复element-plus 问题
.el-input.is-disabled .el-input__inner {
  -webkit-text-fill-color: var(--el-disabled-text-color);
}
