@use 'share' as *;
@use 'variables' as *;
@use 'config' as *;

.fat-table {
  $tooltip-color: getVar(tooltip-color, $fat-color-font-secondary);
  $tooltip-hover-color: getVar(tooltip-hover-color, $fat-color-font-regular);

  &__tooltip {
    width: 1.2em;
    vertical-align: text-bottom;
    margin-left: 0.4em;
    fill: $tooltip-color;
    cursor: pointer;

    &:hover {
      fill: $tooltip-hover-color;
    }
  }

  &__query {
    // FIXME: 这里覆盖了 element-ui 的样式
    .#{$el-ns}-form-item {
      margin-bottom: 16px;

      &__label {
        padding-right: 7px;
      }
    }

    margin-bottom: calc(-1 * #{$fat-spacing-sm});
  }

  &__empty {
    transition: opacity 225ms ease-out 200ms;
    opacity: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
    padding: 40px 0;

    .el-empty__image {
      height: 160px;
    }
    .el-empty__image img,
    .el-empty__image svg {
      fill: #dcdde0;
      height: 100%;
      vertical-align: top;
      width: 100%;
    }
    .el-empty__description {
      line-height: 1;
    }
  }

  &--ready &__empty {
    opacity: 1;
  }

  &__batch-actions {
    display: flex;
    align-items: center;
  }

  &__column-setting {
    display: flex;
    align-items: center;
    gap: 2px;
    color: $fat-color-gray-800;
    font-size: $fat-font-size-h4;
    cursor: pointer;
    line-height: 1.5;

    &:hover {
      opacity: 0.8;
    }

    &-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-btn {
      display: flex;
      align-items: center;
      gap: 6px;

      & > * {
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }

      [role='cancel'] {
        color: $fat-color-gray-800;
      }

      [role='confirm'] {
        color: $fat-color-link;
      }
    }

    &-bd {
      display: flex;
      flex-direction: column;
      padding-left: 20px;
      width: 100%;
      max-height: 500px;
      overflow: auto;
    }

    &-ck {
      margin-right: 0;
      flex-shrink: 0;

      &-label {
        display: inline-block;
        max-width: 15em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}