@mixin pagination-wrap(
  $bg-color: #f8fafc,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: max-content;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: row;

  .child {
    padding: $base-padding * 0.8 $base-padding * 1.6;
    border: 0.1rem solid #e5e6e6;
    border-radius: 0.6rem;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #020202;

    .icon {
      fill: currentColor;
      width: 2rem;
      height: 1.3rem;
      display: inline-block;
      margin-bottom: 0rem;
      //   transform: translateY(0.2rem);
    }

    // .img-box {
    //   width: 2rem;
    //   height: 2rem;

    //   .img {
    //     object-fit: contain;
    //     width: 100%;
    //     height: 100%;
    //     // fill: #020202;
    //   }
    // }
  }
}

@each $key, $val in $colors {
  .pagination-wrap__#{$key} {
    @include pagination-wrap;

    .icon {
      //  fill: $val;
    }

    .child {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        // transform: translateY(-0.1rem);
        background-color: #f8fffc;
        border: 0.1rem solid #9be5c9;
        color: #0b8376;
      }

      .icon {
        fill: currentColor;
      }
    }

    .current {
      background-color: $val;
      border: none;
      color: #ffffff;
      cursor: default;

      &:hover {
        transform: unset;
        background-color: $val;
        border: none;
        color: #ffffff;
      }
    }
  }

  .pagination-wrap__black_#{$key} {
    .child {
      &:hover {
        color: #020202;
        border: 0.1rem solid #676767;
        background-color: #f7f8f7;
      }
    }

    .current {
        background-color: $val;
        border: none;
        color: #ffffff;
        cursor: default;
  
        &:hover {
          transform: unset;
          background-color: $val;
          border: none;
          color: #ffffff;
        }
      }
  }
}