.wp-block-button button[type=submit],
.wp-block-button input[type=button],
.wp-block-button input[type=submit],
.wp-block-button .wp-block-button__link,
.wp-element-button,
.is-style-button,
.button:not(.components-button),
[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: var(--wp--custom--transition);
  color: var(--wp--custom--elements--button--color--text, #ffffff);
  border-radius: var(--wp--custom--elements--button--border-radius, var(--wp--custom--border-radius--rounded, 0.25rem));
  border-width: 0;
  font-family: inherit;
  font-size: var(--wp--custom--elements--button--font-size, var(--wp--preset--font-size--small, 0.875rem));
  font-weight: var(--wp--custom--elements--button--font-weight, var(--wp--custom--font-weight--semi-bold, 600));
  line-height: inherit;
  //padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;

  &:not(.has-background) {
    background: var(--wp--custom--elements--button--color--background, var(--wp--custom--color--primary, currentColor));
  }
}

.wp-block-button button[type=submit]:hover,
.wp-block-button input[type=button]:hover,
.wp-block-button input[type=submit]:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover,
.is-style-button:hover,
.button:not(.components-button):hover {
  color: var(--wp--custom--elements--button--hover--color--text, #ffffff);

  &:not(.has-background) {
    background: var(--wp--custom--elements--button--hover--color--background, var(--wp--custom--color--active, currentColor));
  }
}

.wp-block-button:not([class*=has-icon__]) button[type=submit]::after,
.wp-block-button:not([class*=has-icon__]) input[type=button]::after,
.wp-block-button:not([class*=has-icon__]) input[type=submit]::after,
.wp-block-button:not([class*=has-icon__]) .wp-block-button__link::after,
.wp-element-button:not([class*=has-icon__] .wp-element-button)::after,
.is-style-button:not([class*=has-icon__] .is-style-button)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%
}

.wp-block-button:not([class*=has-icon__]) button[type=submit]:hover::after,
.wp-block-button:not([class*=has-icon__]) input[type=button]:hover::after,
.wp-block-button:not([class*=has-icon__]) input[type=submit]:hover::after,
.wp-block-button:not([class*=has-icon__]) .wp-block-button__link:hover::after,
.wp-element-button:not([class*=has-icon__] .wp-element-button):hover::after,
.is-style-button:not([class*=has-icon__] .is-style-button):hover::after {
  animation: buttonripple 1s ease-out;
  text-decoration: none;
}

.wp-block-button.is-style-ghost .wp-block-button__link::after,
.wp-block-button.is-style-outline .wp-block-button__link::after {
  background: currentColor;
}

@keyframes buttonripple {
  0% {
    transform: scale(0, 0);
    opacity: .15
  }

  20% {
    transform: scale(20, 20);
    opacity: .15
  }

  100% {
    opacity: 0;
    transform: scale(40, 40)
  }
}
