.base-button {
  --base-button-height: 48px;
  --base-button-padding: 12px 24px;
  --base-button-radius: 8px;
  --base-button-font: var(--text-b1-r);
  --base-button-icon-size: 24px;
  --base-button-bg: var(--action-primary-default);
  --base-button-color: var(--action-primary-content-default);
  --base-button-border: transparent;
  --base-button-hover-bg: var(--action-primary-hover);
  --base-button-hover-color: var(--action-primary-content-hover);
  --base-button-hover-border: var(--base-button-border);
  --base-button-disabled-bg: var(--action-primary-disabled);
  --base-button-disabled-color: var(--action-primary-content-disabled);
  --base-button-disabled-border: transparent;
}

button.base-button,
a.base-button,
input.base-button,
.base-button button,
.base-button input[type="submit"],
.base-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max-content;
  height: var(--base-button-height);
  padding: var(--base-button-padding);
  color: var(--base-button-color);
  font: var(--base-button-font);
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  background: var(--base-button-bg);
  border: 1px solid var(--base-button-border);
  border-radius: var(--base-button-radius);
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

button.base-button:hover,
button.base-button:focus-visible,
button.base-button.is-hover-preview,
a.base-button:hover,
a.base-button:focus-visible,
a.base-button.is-hover-preview,
input.base-button:hover,
input.base-button:focus-visible,
input.base-button.is-hover-preview,
.base-button:hover button,
.base-button button:hover,
.base-button button:focus-visible,
.base-button.is-hover-preview button,
.base-button:hover input[type="submit"],
.base-button input[type="submit"]:hover,
.base-button input[type="submit"]:focus-visible,
.base-button.is-hover-preview input[type="submit"],
.base-button:hover .wp-block-button__link,
.base-button .wp-block-button__link:hover,
.base-button .wp-block-button__link:focus-visible,
.base-button.is-hover-preview .wp-block-button__link {
  color: var(--base-button-hover-color);
  background: var(--base-button-hover-bg);
  border-color: var(--base-button-hover-border);
  outline: none;
}

button.base-button:focus-visible,
a.base-button:focus-visible,
input.base-button:focus-visible,
.base-button button:focus-visible,
.base-button input[type="submit"]:focus-visible,
.base-button .wp-block-button__link:focus-visible {
  border-color: var(--base-button-hover-border);
}

button.base-button:disabled,
button.base-button[aria-disabled="true"],
button.base-button.is-disabled,
a.base-button[aria-disabled="true"],
a.base-button.is-disabled,
input.base-button:disabled,
input.base-button[aria-disabled="true"],
input.base-button.is-disabled,
.base-button.is-disabled button,
.base-button button:disabled,
.base-button button[aria-disabled="true"],
.base-button.is-disabled input[type="submit"],
.base-button input[type="submit"]:disabled,
.base-button input[type="submit"][aria-disabled="true"],
.base-button.is-disabled .wp-block-button__link,
.base-button .wp-block-button__link[aria-disabled="true"],
.base-button .wp-block-button__link.is-disabled {
  color: var(--base-button-disabled-color);
  background: var(--base-button-disabled-bg);
  border-color: var(--base-button-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}

.base-button svg,
.base-button img,
.base-button__icon {
  flex: 0 0 var(--base-button-icon-size);
  width: var(--base-button-icon-size);
  height: var(--base-button-icon-size);
}

.base-button svg,
.base-button__icon {
  color: currentColor;
  stroke: currentColor;
}

.base-button--s {
  --base-button-height: 40px;
  --base-button-padding: 10px 16px;
  --base-button-radius: 6px;
  --base-button-font: var(--text-b2-r);
  --base-button-icon-size: 20px;
}

.base-button--m {
  --base-button-height: 48px;
  --base-button-padding: 12px 24px;
  --base-button-radius: 8px;
  --base-button-font: var(--text-b1-r);
  --base-button-icon-size: 24px;
}

.base-button--primary {
  --base-button-bg: var(--action-primary-default);
  --base-button-color: var(--action-primary-content-default);
  --base-button-hover-bg: var(--action-primary-hover);
  --base-button-hover-color: var(--action-primary-content-hover);
  --base-button-disabled-bg: var(--action-primary-disabled);
  --base-button-disabled-color: var(--action-primary-content-disabled);
}

.base-button--secondary {
  --base-button-bg: transparent;
  --base-button-color: var(--action-secondary-content-default);
  --base-button-border: var(--action-secondary-border-default);
  --base-button-hover-bg: var(--action-secondary-hover);
  --base-button-hover-color: var(--action-secondary-content-hover);
  --base-button-hover-border: var(--action-secondary-border-hover);
  --base-button-disabled-bg: transparent;
  --base-button-disabled-color: var(--action-secondary-content-disabled);
  --base-button-disabled-border: var(--action-secondary-border-disabled);
}

.base-button--grey {
  --base-button-bg: var(--action-grey-default);
  --base-button-color: var(--action-grey-content-default);
  --base-button-hover-bg: var(--action-grey-hover);
  --base-button-hover-color: var(--action-grey-content-hover);
  --base-button-disabled-bg: var(--action-grey-disabled);
  --base-button-disabled-color: var(--action-grey-content-disabled);
}

.base-button--tertiary {
  --base-button-bg: var(--action-tertiary-default);
  --base-button-color: var(--action-tertiary-content-default);
  --base-button-hover-bg: var(--action-tertiary-hover);
  --base-button-hover-color: var(--action-tertiary-content-hover);
  --base-button-disabled-bg: var(--action-tertiary-disabled);
  --base-button-disabled-color: var(--action-tertiary-content-disabled);
}

.base-button--ghost {
  --base-button-bg: transparent;
  --base-button-color: var(--action-ghost-content-default);
  --base-button-hover-bg: var(--action-ghost-hover);
  --base-button-hover-color: var(--action-ghost-content-hover);
  --base-button-disabled-bg: transparent;
  --base-button-disabled-color: var(--action-ghost-content-disabled);
}