@import './../index.scss';
@import '~amos-framework/lib/styles/mixins/scrollbar.scss';

.eb-gridtable {
  display: flex;
  width: 100%;
  height: 90%;
  flex-direction: column;

  .amosd-table {
    thead {
      tr {
        background: linear-gradient(360deg, white 0%, rgba(243, 243, 243, 1) 100%);
      }
    }

    th {
      height: 30px;
      padding: 0;
      overflow: hidden;
      border-right: 1px solid var(--gm-table-frame-main-bordercolor, $frame-main-bordercolor);
      border-bottom: 0; // !important;

      &:last-child {
        border-right: 0;
      }

      .eb-gridtable-header-edit {
        color: rgba(0, 128, 255, 1);
        cursor: pointer;
      }

      .eb-gridtable-datatype-label {
        margin-left: 5px;
        color: rgba(114, 177, 225, 1);
      }

      > div {
        &:first-child {
          display: flex;
          width: 100%;
          height: 100%;
          padding: 0 10px;
          font-size: $frame-third-fontsize;
          color: var(--gm-table-frame-fourth-color, $frame-fourth-color);
          align-items: center; // !important;
        }

        &:last-child {
          > div {
            display: none;
          }
        }
      }
    }

    tbody {
      tr {
        td {
          height: 30px;
          padding: 0 10px 0 18px;
          font-size: $frame-third-fontsize;
          color: var(--gm-table-frame-first-color, $frame-first-color);
          vertical-align: middle;
          border-top: 0;
          border-right: 0;
          border-bottom: 0;

          &:last-child {
            border-right: 0;
          }
        }
      }
    }
  }

  .eb-gridtable-content {
    width: 100%;
    height: calc(100% - 80px);
    border-top: 1px solid var(--gm-table-border-color-eaeaea, $border-color-eaeaea);
    flex: 1;
    overflow: auto;
    @include pretty-scrollbar(5px, 8px, var(--gm-table-scrollOutColor, $scrollOutColor), var(--gm-table-scrollInnerColor, $scrollInnerColor));

    .ant-table-pagination {
      width: 100%;
      // display: none;
      text-align: center;

      > li {
        margin: 0;
        font-size: 13px;
        background: var(--gm-table-pagination-item-background, $pagination-item-background);
        border-left: 0;
        border-color: var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
        border-radius: 0;

        > a {
          color: var(--gm-table-font-color-047474, $font-color-047474);
        }

        &.ant-pagination-prev {
          background: var(--gm-table-ant-pagination-prev-next-background, $ant-pagination-prev-next-background);
          border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
          border-radius: 6px 0 0 6px;

          > a::after {
            font-size: 18px;
            color: var(--gm-table-ant-pagination-prev-next-color, $ant-pagination-prev-next-color);
          }
        }

        &.ant-pagination-next {
          background: var(--gm-table-ant-pagination-prev-next-background, $ant-pagination-prev-next-background);
          border-radius: 0 6px 6px 0;

          > a::after {
            font-size: 18px;
            color: var(--gm-table-ant-pagination-prev-next-color, $ant-pagination-prev-next-color);
          }
        }

        &.ant-pagination-jump-next {
          & + .ant-pagination-item {
            // border-left: 1px solid #e4e4e4;
            border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
          }

          &::after {
            color: white;
          }
        }

        &.ant-pagination-jump-prev {
          & + .ant-pagination-item {
            // border-left: 1px solid #e4e4e4;
            border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
          }
        }

        &.ant-pagination-item {
          &.ant-pagination-item-active {
            background: var(--gm-table-ant-pagination-item-active-background, $ant-pagination-item-active-background);
            border-color: var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);

            > a {
              color: white;
            }
          }
        }
      }
    }

    .ant-table-fixed-header {
      .ant-table-content {
        .ant-table-scroll {
          div {
            margin-bottom: 0;
          }

          .ant-table-header {
            overflow: hidden;
            background: none;
            padding-bottom: auto;
            //margin-bottom: 0;
          }

          .ant-table-body {
            background: none;
            //margin-top: 19px;
          }
        }
      }
    }

    .ant-table-placeholder {
      color: var(--gm-table-font-color-3f3f3f, $font-color-3f3f3f);
      background: var(--gm-table-table-header-tr-background, $table-header-tr-background);
      border-bottom: 1px solid var(--gm-table-border-color-eaeaea, $border-color-eaeaea);
    }

    .ant-table-tbody {
      tr {
        td {
          margin-top: 4px;
          color: var(--gm-table-font-color-3f3f3f, $font-color-3f3f3f);
          background: var(--gm-table-table-body-td-background, $table-body-td-background);
          border-bottom: 4px solid var(--gm-table-table-tbody-border, $table-tbody-border);
        }
      }
    }

    .ant-table-wrapper {
      width: 100%;
      height: 100%;

      tr {
        th {
          height: 30px;
          padding: 0;
          font-size: 13px;
          color: var(--gm-table-font-color-3f3f3f, $font-color-3f3f3f);
          text-align: center;
          background: var(--gm-table-pagination-item-background, $pagination-item-background);
          border-left: solid 1px var(--gm-table-border-color-eaeaea, $border-color-eaeaea);
        }

        &.eb-gridtable-row-select {
          background-color: rgba(168, 241, 223, 0.3);

          td {
            background-color: transparent;
          }
        }

        td {
          height: 30px;
          padding: 4px 10px;
          font-size: 13px;
          color: var(--gm-table-font-color-3f3f3f, $font-color-3f3f3f);
          text-align: center;
          // border: 0;
        }

        td.eb-gridtable-td-left {
          text-align: left;
        }

        td.eb-gridtable-td-right {
          text-align: right;
        }

        td.eb-gridtable-td-center {
          text-align: center;
        }

        th.eb-gridtable-th-left {
          padding-left: 10px;
          text-align: left;
        }

        th.eb-gridtable-th-right {
          text-align: right;
        }

        th.eb-gridtable-th-center {
          text-align: center;
        }
      }
    }
  }

  &.eb-gridtable-hidefooter {
    .eb-gridtable-content {
      height: 100%;
    }
  }
}

.eb-datagrid-footer {
  width: 100%;
  height: 50px;
  margin-top: 5px;
  line-height: 50px;
  text-align: center;
  border-top: solid 1px var(--gm-table-border-color-eaeaea, $border-color-eaeaea);

  .ant-pagination-options {
    margin-left: 30px;
    vertical-align: top;

    .select-scroll-wrapper {
      width: auto;
      height: 28px;
    }

    .ant-select {
      height: 100%;
      color: var(--gm-table-form-label-font-color, $form-label-font-color);
      //border: 1px solid var(--gm-table-amos-form-item-border, $amos-form-item-border);

      .ant-select-selection--single {
        height: 100%;
        /* stylelint-disable-next-line declaration-no-important */
        background: var(--gm-table-pagination-jumper-background, $pagination-jumper-background) !important;
        border: 1px solid var(--gm-table-border-color-d9d9d9, $border-color-d9d9d9);

        .ant-select-selection__rendered {
          line-height: 28px;
        }

        .ant-select-arrow {
          color: var(--gm-table-ant-pagination-prev-next-color, $ant-pagination-prev-next-color);
        }
      }
    }
  }

  // .ant-pagination-jump-prev::after,
  // .ant-pagination-jump-next::after {
  //   color: red;
  // }

  .ant-pagination {
    .ant-pagination-total-text {
      margin-right: 33px;
      font-size: 13px;
      // color: #201e1e;
      color: var(--gm-table-font-color-201e1e, $font-color-201e1e);
    }

    .ant-pagination-options-quick-jumper {
      height: 28px;
      font-size: 13px;
      line-height: 28px;
      // color: #201e1e;
      color: var(--gm-table-font-color-201e1e, $font-color-201e1e);

      input {
        height: 28px;
        font-size: 13px;
        line-height: 28px;
        // color: #201e1e;
        color: var(--gm-table-font-color-201e1e, $font-color-201e1e);
        background: var(--gm-table-pagination-jumper-background, $pagination-jumper-background);
        border: 1px solid var(--gm-table-border-color-d9d9d9, $border-color-d9d9d9);
      }
    }

    > li {
      margin: 0;
      font-size: 13px;
      background: var(--gm-table-pagination-item-background, $pagination-item-background);
      border-left: 0;
      // border-color: #e4e4e4;
      border-color: var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
      border-radius: 0;

      > a {
        color: var(--gm-table-font-color-047474, $font-color-047474);
      }

      &.ant-pagination-prev {
        background: var(--gm-table-ant-pagination-prev-next-background, $ant-pagination-prev-next-background);
        // border-left: 1px solid #e4e4e4;
        border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
        border-radius: 6px 0 0 6px;

        > a::after {
          font-size: 18px;
          color: var(--gm-table-ant-pagination-prev-next-color, $ant-pagination-prev-next-color);
        }
      }

      &.ant-pagination-next {
        background: var(--gm-table-ant-pagination-prev-next-background, $ant-pagination-prev-next-background);
        border-radius: 0 6px 6px 0;

        > a::after {
          font-size: 18px;
          color: var(--gm-table-ant-pagination-prev-next-color, $ant-pagination-prev-next-color);
        }
      }

      &.ant-pagination-jump-next {
        & + .ant-pagination-item {
          // border-left: 1px solid #e4e4e4;
          border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
        }

        // &::after {
        //   color: white;
        // }
      }

      &.ant-pagination-jump-prev {
        & + .ant-pagination-item {
          // border-left: 1px solid #e4e4e4;
          border-left: 1px solid var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);
        }

        // &::after {
        //   color: white;
        // }
      }

      &.ant-pagination-item {
        &.ant-pagination-item-active {
          background: var(--gm-table-ant-pagination-item-active-background, $ant-pagination-item-active-background);
          border-color: var(--gm-table-ant-pagination-item-border, $ant-pagination-item-border);

          > a {
            color: white;
          }
        }
      }
    }
  }

  .ant-select-dropdown-menu-item {
    color: var(--gm-table-font-color-black, $font-color-black);
    background: var(--gm-table-form-modal-background, $form-modal-background);

    &:hover {
      background: var(--gm-table-firecard-menulist-background-hover, $firecard-menulist-background-hover);
    }
  }
}

.eb-com-tablelist-table {
  @include pretty-scrollbar(5px, 8px, var(--gm-table-scrollOutColor, $scrollOutColor), var(--gm-table-scrollInnerColor, $scrollInnerColor));
  //overflow: auto;
}
