@mixin tab__tab-links(
  $bg-color: #e2e2e2,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: 100%;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;

  .tab-link {
    border-radius: $base-border-radius;
    padding: $base-padding * 0.7 $base-padding;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: capitalize;

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

.tab-link-parent {
  @include tab__tab-links;

  @each $key, $val in $colors {
    .tab-link__#{$key} {
      cursor: default;
      font-weight: 500;
      color: #ffffff;
      position: relative;

      & > * {
        position: relative;
        z-index: 3;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: $base-btn-border-radius;
        z-index: 2;
        background-color: $val;
      }

      &:hover {
        transform: unset !important;
      }
    }

    .tab-link_faded {
      // background-color: #e8fff6;
      cursor: default;
      font-weight: 500;
      position: relative;
      color: #0b8376;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: $base-btn-border-radius;
        z-index: 2;
        background-color: #e8fff6;
      }

      &:hover {
        transform: unset !important;
      }
    }

    .tab-link_faded_black {
      cursor: default;
      font-weight: 500;
      color: #020202;
      border: 0.05rem solid #676767;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: $base-btn-border-radius;
        z-index: 2;
        background-color: #f7f8f7;
        // color: rgba(255, 255, 255, 0);
      }

      &:hover {
        transform: unset !important;
      }
    }
  }
}