.button,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--transition-standard),
    color var(--transition-standard),
    border-color var(--transition-standard),
    transform var(--transition-standard);
}

.button:hover,
.button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible {
  background: var(--button-bg-hover);
  border: var(--button-border-hover);
  color: var(--button-text);
  transform: translateY(-1px);
}

.button--outline,
.is-style-outline .wp-element-button {
  background: var(--button-outline-bg);
  color: var(--button-outline-text);
}

.button:not(.button--outline),
.wp-element-button:not(.is-style-outline) {
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-gold) 90%, transparent);
  transition:
    background var(--transition-standard),
    color var(--transition-standard),
    border-color var(--transition-standard),
    transform var(--transition-standard),
    box-shadow var(--transition-standard);
}

.button:not(.button--outline):hover,
.button:not(.button--outline):focus-visible,
.wp-element-button:not(.is-style-outline):hover,
.wp-element-button:not(.is-style-outline):focus-visible {
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--color-gold) 95%, transparent);
}

.button--outline:hover,
.button--outline:focus-visible,
.is-style-outline .wp-element-button:hover,
.is-style-outline .wp-element-button:focus-visible {
  background: var(--color-gold-tint);
  border-color: var(--color-gold-soft);
  color: var(--button-outline-text-hover);
}