/* Button Variants CSS with padding variables */
.wp-block-button .wp-element-button {
  position: relative;
  overflow: hidden;
  --btn-hover-bg: var(--wp--preset--color--white);
  background-image: linear-gradient(transparent 50%, var(--btn-hover-bg) 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: all 0.15s ease-in-out;

  &:hover {
    background-position: 0 100%;
  }

  &:active {
    transform: translateY(1px);
  }
}

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-fill-slim .wp-block-button__link {
  --btn-hover-bg: var(--wp--preset--color--gold);

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

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline-slim .wp-block-button__link {
  --btn-hover-bg: var(--wp--preset--color--primary);

  &:hover {
    color: var(--wp--preset--color--white);
  }
}

.wp-block-button.is-style-green .wp-block-button__link,
.wp-block-button.is-style-green-slim .wp-block-button__link {
  --btn-hover-bg: var(--wp--preset--color--light-green);

  &:hover {
    color: var(--wp--preset--color--white);
  }
}