@mixin table(
  $bg-color: #f8fafc,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: 100%;
  font-size: 1.4rem;
  border-spacing: 0rem;
  border-collapse: separate;

  .table-head,
  thead {
    tr {
      th {
        background-color: #f7f8f7;
        text-align: left;
        text-transform: uppercase;
        font-size: 1.3rem;
        // font-weight: 900;
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;
        border-bottom: 0.6px solid #e5e6e6;
      }

        & > *:first-child {
          padding-left: 3rem;
        }

        // &>*:nth-last-child(2){
        //     text-align: center;
        // }

        .action {
          text-align: center;
          padding-right: 3rem;
          //   color: #1110101a;
        }
    }
  }

  .table-body,
  tbody {
    & > *:not(:last-child) {
      td,
      .table-data {
        border-bottom: 0.6px solid #e5e6e6;
      }
    }

    tr,
    .table-row {
      td,
      .table-data {
        padding: 1.3rem 0rem;
        font-weight: 300;
        font-size: 1.25rem;

        .action-box {
          display: flex;
          align-items: center;
          gap: 1.2rem;
          position: relative;
          // background-color: green;
          justify-content: flex-end;
          // padding-right: 3rem;

          .img-box {
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-0.06rem);
            }

            .img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .action-wrap {
            // background-color: red;
            position: relative;
            // margin: 0rem auto;
            // z-index: 10;

            .drop-box {
              position: absolute;
              top: 105%;
              right: 1.5rem;
              width: max-content;
              transform: scale(0);
              transform-origin: top right;
              transition: all 0.2s ease-in-out;
              z-index: 10;

              & > * {
                min-width: 17rem;
                max-width: unset;

                .icon-box {
                  width: 2rem;
                  height: 2rem;

                  .img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                  }
                }
              }
            }

            .drop-box-show {
              transform: scale(1);
            }
          }
        }

        .img-text {
          display: flex;
          align-items: center;

          .img-box {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.7rem;

            .img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }

      .table-data-action{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 3rem;
        gap: 1rem;

        .action-box {
          display: flex;
          align-items: center;
          gap: 1.2rem;
          position: relative;

          .img-box {
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-0.06rem);
            }

            .img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .action-wrap {
            // background-color: red;
            position: relative;
            // margin: 0rem auto;
            // z-index: 10;

            .drop-box {
              // background-color: yellow;
              position: absolute;
              top: 105%;
              right: 1.5rem;
              width: max-content;
              transform: scale(0);
              transform-origin: top right;
              transition: all 0.2s ease-in-out;
              z-index: 10;
              // background-color: red;

              & > * {
                min-width: 17rem;
                max-width: unset;

                .icon-box {
                  width: 2rem;
                  height: 2rem;

                  .img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                  }
                }
              }
            }

            .drop-box-show {
              transform: scale(1);
            }
          }
        }
      }

      cursor: pointer;
      & > *:first-child {
        padding-left: 3rem;
        // background-color: red;
      }

      // & > *:last-child {
      //   //   text-align: center ;
      //   padding-right: 3rem;
      // }
    }
  }
}

.table {
  @include table;

  @each $key, $val in $colors {
  }
}

.table_strip {
  @include table;

  .table-head,
  thead {
    tr {
      th {
        background-color: #f7f8f7;
        border-bottom: unset;
      }
    }
  }

  .table-body,
  tbody {
    & > *:not(:last-child) {
      td,
      .table-data {
        border-bottom: unset;
      }
    }
    & > *:nth-child(even) {
      background-color: #f9f9f9;
    }
  }
}

.mobile-table-wrap {
  width: 35rem;
  // background-color: red;
  border: 0.06rem solid #f7f6fc;
  padding: 0rem;
  border-radius: 1rem;

  .mobile-body {
    display: flex;
    flex-direction: column;
    padding: 0rem 1.5rem;
    & > *:not(:last-child) {
      border-bottom: 0.06rem solid #e5e6e6;
    }

    .table-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      // background-color: red;
      align-items: flex-start;
      padding: 1.5rem 0rem;

      .value {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;

        .text-box {
          display: flex;
          flex-direction: column;
          //  gap: -1rem;

          .value-two {
            margin-top: -0.3rem;
          }
        }

        .img-box {
          width: 2.5rem;
          height: 2.5rem;

          .img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
  }

  .header-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #f7f8f7;
    align-items: center;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 0.06rem solid #e5e6e6;

    .title {
      font-weight: 700;
      color: #020202;
      font-size: 1.3rem;
      text-transform: uppercase;
    }

    .select-title {
      text-align: left;

      & > *:nth-child(3) {
        border: none;
        font-weight: 700;
        color: #020202;
        background-color: transparent;
        min-height: unset;
        justify-content: unset;
        cursor: pointer;

        & > *:nth-child(1) {
          padding: unset;
          flex: unset;
        }

        & > *:nth-child(2) {
          span {
            display: none;
          }

          & > *:nth-child(2) {
            padding: unset;

            svg {
              width: 2rem;
              height: 2rem;
              color: #020202;
            }
          }
        }
      }
    }
  }
}