.agx-btn {
  @extend %d-inline-flex, %item-center;
  @include transition($transition);
  gap: 10px;
  background-color: $color-primary;
  color: $color-1;
  font-size: 16px;
  font-weight: 400;
  line-height: 162.5%;
  border-radius: 999px;
  padding: 11px 28.5px;
  border: 1px solid $color-primary;

  &:has(> span:nth-of-type(1):not(:only-child)) {
    // > span:nth-of-type(1) {
    // }
    > span:nth-of-type(2) {
      @extend %p-relative, %d-inline-block;
      overflow: hidden;
      width: 22.001px;
      height: 22.001px;

      i,
      svg {
        &:nth-of-type(1) {
          // @include transition(0.3s cubic-bezier(0.37, 0.08, 0.02, 0.93));
          @include transition($transition-3);
          @include transform(translate(-50%, -50%));
          @extend %p-absolute;
          top: 50%;
          left: 50%;
          font-size: 16px;
          color: inherit;
        }
        &:nth-of-type(2) {
          // @include transition(0.3s cubic-bezier(0.37, 0.08, 0.02, 0.93));
          @include transition($transition-3);
          @include transform(translate(0%, -50%));
          @extend %p-absolute;
          left: -100%;
          top: 200%;
          font-size: 16px;
          color: inherit;
        }
      }
    }
  }

  //   &:not(:has(> span:nth-of-type(2))) {
  //     > span {
  //     }
  //   }

  span {
    color: inherit;
    font-size: inherit;
    font-style: normal;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    display: inline-block;
  }

  &:hover {
    color: $color-primary;
    background-color: transparent;
    &:has(> span:nth-of-type(1):not(:only-child)) {
      > span:nth-of-type(2) {
        i,
        svg {
          &:nth-of-type(1) {
            top: -100%;
            left: 200%;
          }
          &:nth-of-type(2) {
            @include transform(translate(-50%, -50%));
            left: 50%;
            top: 50%;
          }
        }
      }
    }
  }

  &.v2 {
    background: $color-white;
  }
  &.v3 {
    background: $color-white;
    border-color: $color-white;

    &:hover {
      color: $color-white;
      background-color: transparent;
    }
  }
  &.v4 {
    padding: 12px 28px;
    border-radius: 50px;
    background: $color-white;
    color: $color-1;
    border: none;
    line-height: 1;

    &:hover {
      background-color: $color-1;
      color: $color-white;
    }
  }
  &.v5 {
    background-color: transparent;
    border-color: $color-white;
    color: $color-white;
    padding: 12.5px 30px;
    margin: 0;

    &:hover {
      background-color: $color-white;
      color: $color-1;
    }

    @include breakpoint(max-sm) {
      padding-block: 10px;
    }
  }
}
.agx-btn2 {
  @extend %d-grid, %place-center;
  width: 70px;
  height: 70px;
  background-color: transparent;
  color: $color-4;
  border: 1.5px solid $color-4;
  border-radius: 50%;

  @include breakpoint(max-md) {
    width: 55px;
    height: 55px;
  }

  span {
    @extend %p-relative, %d-inline-block;
    overflow: hidden;
    width: 22.001px;
    height: 22.001px;

    i,
    svg {
      &:nth-of-type(1) {
        @include transition($transition-3);
        @include transform(translate(-50%, -50%));
        @extend %p-absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        color: inherit;
        @include breakpoint(max-md) {
          font-size: 18px;
        }
      }
      &:nth-of-type(2) {
        @include transition($transition-3);
        @include transform(translate(0%, -50%));
        @extend %p-absolute;
        left: -100%;
        top: 200%;
        font-size: 20px;
        color: inherit;
        @include breakpoint(max-md) {
          font-size: 18px;
        }
      }
    }
  }

  &:hover {
    color: $color-1;
    background-color: $color-primary;
    border-color: $color-primary;

    span {
      i,
      svg {
        &:nth-of-type(1) {
          top: -100%;
          left: 200%;
        }
        &:nth-of-type(2) {
          @include transform(translate(-50%, -50%));
          left: 50%;
          top: 50%;
        }
      }
    }
  }

  &.v2 {
    border-color: $color-primary;
    background-color: $color-primary;
    color: $color-2;

    &:hover {
      background-color: transparent;
      color: $color-primary;
    }
  }
}

.agx-btn3 {
  @extend %d-inline-flex, %item-center;
  gap: 10px;
  border-radius: 50px;
  background-color: $color-white;
  color: $color-1;
  font-size: 18px;
  text-transform: capitalize;
  padding: 20px 30px;
  line-height: 1;

  span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }
  i,
  svg {
    @include transition($transition);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }

  &:hover {
    background-color: $color-primary;
    i,
    svg {
      @include transform(rotate(180deg));
    }
  }

  &.v2 {
    border: none;
    border-radius: 10px;
    background: $color-primary;
  }
}
