// customize element-ui
.el-dialog {
  &.is-fullscreen {
    background-color: $--color-background;

    .el-dialog__header {
      width: 100%;
      position: fixed;
      z-index: 19;
      background-color: #fff;
      border-bottom: 1px solid $--color-border;
      padding: 15px;
    }
    .el-dialog__body {
      min-height: 100%;
      padding-top: 80px;
      top: 0;
    }
    .el-dialog__footer {
      display: none;
    }
  }
}
.side-dialog {
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  height: 100%;
  box-shadow: -20px 20px 20px 0px rgba(212, 220, 243, 0.3);
  .el-dialog__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    &::after {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      border-bottom: 1px solid $--color-border;
    }
  }
  .el-dialog__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    bottom: 80px;
    padding: 20px;
    overflow: auto;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
  }
  // other
  .el-form {
    &-item {
      margin-bottom: 16px;
      &__label {
        margin: 0;
      }
      &__error {
        padding-top: 2px;
      }
    }
  }
}
.action-dropdown {
  background-color: $--color-text-primary;
  padding: 0 19px;
  .el-dropdown-menu__item {
    padding: 0;
    border-bottom: 1px solid #434555;
    background-color: transparent !important;

    &:hover {
      .el-button {
        color: $--color-white !important;
      }
      .el-button--danger {
        color: $--color-danger !important;
      }
    }
  }
  .el-button {
    display: block;
    width: 100%;
    color: #aaa !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    height: 40px;
    font-size: 13px;
    text-align: left;

    &:hover {
      color: $--color-white !important;
    }
  }

  &.el-popper[x-placement^="bottom"] {
    .popper__arrow {
      border-bottom-color: $--color-text-primary;
      &::after {
        border-bottom-color: $--color-text-primary;
      }
    }
  }
  &.el-popper[x-placement^="top"] {
    .popper__arrow {
      border-top-color: $--color-text-primary;
      &::after {
        border-bottom-color: $--color-text-primary;
      }
    }
  }
}
// el-button
.el-button--danger.is-plain,
.el-button--success.is-plain,
.el-button--primary.is-plain,
.el-button--warning.is-plain {
  color: $--color-text-primary;
  background-color: #fcfcfd;
  border-color: $--color-border-dark;

  &.is-disabled {
    color: #999 !important;
    background-color: #fcfcfd !important;
    border-color: $--color-border-dark !important;
  }
}
.el-button--info {
  color: $--color-white;
  background: $--color-blue;
  border: 1px solid $--color-blue;
  &:hover,
  &:focus {
    color: $--color-white;
    background: mix(#fff, $--color-blue, 20%);
    border: 1px solid $--color-blue;
  }
}
.el-button {
  [class*="icon"] + span {
    margin-left: 6px;
  }

  &.is-plain {
    &:hover {
      .icon {
        filter: brightness(250%);
      }
    }
  }
  &.is-plain:focus {
    .icon {
      filter: brightness(250%);
    }
  }
  &.is-disabled {
    .icon {
      opacity: 0.5;
    }
    &:hover {
      .icon {
        filter: none;
      }
    }
  }
}
.el-button + .el-upload,
.el-upload + .el-button,
.el-button + .el-dropdown,
.el-dropdown + .el-dropdown,
.el-dropdown + .el-button {
  margin-left: 10px;
}
// .el-upload
.el-upload {
  &-list__item {
    &.is-ready {
      background-color: #f6f6fa;
      color: #434555;
      padding: 5px;
    }
    .el-icon-close {
      top: 10px;
    }
    .el-icon-document {
      color: $--color-danger;
    }
  }
}
// .el-message-box
.el-message-box {
  border-radius: 10px;
  .el-message-box__header {
    padding: 20px 20px 10px;
  }
  .el-message-box__content {
    padding: 10px 30px;
    min-height: 60px;
  }
  .el-message-box__status {
    left: -5px;
    font-size: 30px !important;
  }
}
// .el-input-number
.el-input-number {
  .el-input-number__increase,
  .el-input-number__decrease {
    height: 28px;
    width: 28px;
    line-height: 28px;
    top: 4px;
    border-radius: 6px;
    border: none;
    background-color: $--color-border-dark;
    font-weight: 600;
    font-size: 14px;
    > i {
      font-weight: 600;
    }
  }
  .el-input-number__increase {
    right: 4px;
  }
  .el-input-number__decrease {
    left: 4px;
  }
}
// .el-form
.el-form {
  &-item {
    &__label {
      color: $--color-text-regular;
      font-weight: 500;
    }
  }
  &.form-tight {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
}
// .el-table
.el-table {
  color: $--color-text-primary;
  .thead {
    color: $--color-text-secondary;
  }
}
// el-pagination
.el-pagination-li {
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background-color: $--color-white;
  border: 1px solid #e1e3eb;
}
.el-pagination {
  padding: 0;
  .el-pagination__total {
    float: left;
  }
  .el-pagination__sizes,
  .el-pagination__jump {
    .el-input__inner {
      height: 32px;
      line-height: 30px;
      border-radius: 8px;
    }
  }
  span:not([class*="suffix"]) {
    line-height: 32px;
    height: 32px;
  }

  .btn-prev,
  .btn-next {
    color: $--color-text-secondary;
    margin: 0 5px;
    padding: 0 8px;
    @extend .el-pagination-li;
  }
  .btn-prev:disabled,
  .btn-next:disabled {
    opacity: 0.7;
  }

  .el-pager li {
    color: $--color-text-secondary;
    margin: 0 5px;
    padding: 0 8px;
    line-height: 30px;

    @extend .el-pagination-li;
    &:not(.disabled).active {
      color: #fff;
      background-color: $--color-primary;
    }
    &.active + li {
      border-left: 1px solid #e1e3eb;
    }
  }
}
