.wp-block-button {
  line-height: 0;

  &.is-style-arrow-right {
    .wp-block-button__link {
      padding: 0 0.8em 0 0 !important;
      position: relative;
      transition-property: translate;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;

      &:after {
        aspect-ratio: 1;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13.752" height="20.646" viewBox="0 0 13.752 20.646"><path d="M732.561,684.172,729.2,687.6l10.323,10.323L749.846,687.6l-3.361-3.429-6.962,7.03Z" transform="translate(-684.172 749.846) rotate(-90)" fill="%23fff"/></svg>');
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        height: 0.6em;
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 calc(-50% + 0.1em) 0;
        content: "";
        transition-property: translate;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
      }

      &.has-primary-color {
        &::after {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13.752" height="20.646" viewBox="0 0 13.752 20.646"><path d="M732.561,684.172,729.2,687.6l10.323,10.323L749.846,687.6l-3.361-3.429-6.962,7.03Z" transform="translate(-684.172 749.846) rotate(-90)" fill="%23e53fab"/></svg>');
        }
      }

      &:hover {
        translate: -5px 0 0;

        &::after {
          translate: 10px calc(-50% + 0.1em) 0;
        }
      }
    }
  }

  &.is-style-unstyled {
    line-height: 1;

    .wp-block-button__link {
      transition: all 0.25s;
      padding: 0 !important;
      font-weight: inherit;

      &:after {
        transition: all 0.25s;
        opacity: 0;
        margin: 0 -10px 0 10px;
        position: relative;
        top: -3px;
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14.966" height="22.469" viewBox="0 0 14.966 22.469"><path d="M732.858,684.172,729.2,687.9l11.234,11.235L751.669,687.9l-3.658-3.732-7.577,7.651Z" transform="translate(-684.172 751.669) rotate(-90)" fill="%23e53fab"/></svg>');
      }

      &:hover {
        color: var(--wp--preset--color--primary) !important;

        &:after {
          margin: 0 0 0 15px;
          opacity: 1;
        }
      }
    }

    &.has-hero-font-size {
      .wp-block-button__link {
        &:after {
          top: 0px;
          content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="34.413" height="51.664" viewBox="0 0 34.413 51.664"><path d="M737.61,684.172l-8.41,8.58,25.832,25.833,25.832-25.833-8.41-8.58-17.422,17.592Z" transform="translate(-684.172 780.864) rotate(-90)" fill="%23e53fab" opacity="0.998"/></svg>');
        }

        &:hover {
          color: var(--wp--preset--color--primary) !important;
        }
      }

      @media screen and (max-width: 600px) {
        .wp-block-button__link {
          &:after {
            display: none !important;
          }
        }
      }
    }
  }

  &:not(.is-style-arrow-right):not(.is-style-unstyled) {
    .wp-block-button__link {
      background-color: transparent !important;
      overflow: hidden;
      position: relative;
      transition: all 0.25s;
      -webkit-transform: translate3d(0, 0, 0);

      span:not(.screen-reader-text) {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        content: "";
        display: block;
        position: absolute;
        transition: width 0.4s ease-out;
        translate: -50% -50% 0;
        width: 0;
        z-index: -1;
        -webkit-transform: translate3d(0, 0, 0);
      }

      &:after {
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -2;
        -webkit-transform: translate3d(0, 0, 0);
      }

      &:hover {
        span {
          width: 210%;
        }
      }
    }

    &:not(.is-style-outline) {
      .wp-block-button__link {
        &.is-active-menu {
          color: white !important;

          span {
            background-color: var(--wp--preset--color--primary);
          }

          &:after {
            background-color: var(--wp--preset--color--secondary);
          }
        }
        &.has-primary-background-color {
          span {
            background-color: var(--wp--preset--color--secondary);
          }

          &:after {
            background-color: var(--wp--preset--color--primary);
          }

          &:hover {
            color: white !important;
            border-color: black !important;
          }
        }

        &.has-secondary-background-color {
          span {
            background-color: var(--wp--preset--color--primary);
          }

          &:after {
            background-color: var(--wp--preset--color--secondary);
          }

          &:hover {
            color: white !important;
            border-color: black !important;
          }
        }

        &.has-white-background-color {
          span {
            background-color: var(--wp--preset--color--secondary);
          }

          &:after {
            background-color: white;
          }

          &:hover {
            color: white !important;
          }
        }
      }
    }

    &.is-style-outline {
      .wp-block-button__link {
        &.has-transparent-background-color {
          background-color: transparent !important;
          -webkit-transform: translate3d(0, 0, 0);

          span {
            background-color: white !important;
            -webkit-transform: translate3d(0, 0, 0);
          }

          &:after {
            -webkit-transform: translate3d(0, 0, 0);
          }

          &:hover {
            color: var(--wp--preset--color--secondary) !important;
          }
        }
        &.has-secondary-color {
          span {
            background-color: var(--wp--preset--color--secondary);
          }

          &:after {
            background-color: white;
          }

          &:hover {
            color: white !important;
            border-color: black;
          }
        }
      }
    }
  }
}

.has-secondary-background-color {
  .wp-block-button {
    &:not(.is-style-arrow-right):not(.is-style-unstyled) {
      &:not(.is-style-outline) {
        .wp-block-button__link {
          &.has-primary-background-color {
            span {
              background-color: white;
            }

            &:after {
              background-color: var(--wp--preset--color--primary);
            }

            &:hover {
              color: var(--wp--preset--color--secondary) !important;
              border-color: black !important;
            }
          }
        }
      }
    }
  }
}

.google-stars-btn .wp-block-button__link {
  display: flex;
  gap: 1rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.08);
  align-items: center;
}