.d35-button {
  --d35-button-bg: var(--d35-color-primary);
  --d35-button-color: var(--d35-color-surface);
  --d35-button-border: transparent;
  --d35-button-bg-hover: var(--d35-color-primary-hover);
  --d35-button-color-hover: var(--d35-color-surface);
  --d35-button-border-hover: transparent;
  --d35-button-min-height: 3rem;
  --d35-button-padding-y: 0.82rem;
  --d35-button-padding-x: 1.2rem;
  --d35-button-font-size: 0.95rem;
  --d35-button-icon-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--d35-button-min-height);
  padding: var(--d35-button-padding-y) var(--d35-button-padding-x);
  border: 1px solid var(--d35-button-border);
  border-radius: var(--d35-radius-button);
  background: var(--d35-button-bg);
  color: var(--d35-button-color);
  font-size: var(--d35-button-font-size);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.d35-button__label {
  min-width: 0;
}

.d35-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.d35-button__icon-svg {
  width: var(--d35-button-icon-size);
  height: var(--d35-button-icon-size);
}

.d35-button:hover,
.d35-button:focus-visible {
  transform: translateY(-1px);
  background: var(--d35-button-bg-hover);
  border-color: var(--d35-button-border-hover);
  color: var(--d35-button-color-hover);
}

.d35-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--d35-color-primary) 35%, transparent);
  outline-offset: 3px;
}

.d35-button--full-width {
  display: flex;
  width: 100%;
}

.d35-button--size-small {
  --d35-button-min-height: 2.4rem;
  --d35-button-padding-y: 0.62rem;
  --d35-button-padding-x: 0.95rem;
  --d35-button-font-size: 0.82rem;
  --d35-button-icon-size: 0.95rem;
}

.d35-button--size-large {
  --d35-button-min-height: 3.6rem;
  --d35-button-padding-y: 0.98rem;
  --d35-button-padding-x: 1.45rem;
  --d35-button-font-size: 1.05rem;
  --d35-button-icon-size: 1.3rem;
}

.d35-button--icon-only {
  padding-inline: 0;
}

.d35-button--shape-circle {
  width: var(--d35-button-min-height);
  min-width: var(--d35-button-min-height);
  padding-inline: 0;
  border-radius: var(--d35-radius-button);
}

.d35-button--icon-only.d35-button--shape-circle {
  aspect-ratio: 1 / 1;
}

.d35-button--secondary {
  --d35-button-bg: rgba(255, 255, 255, 0.7);
  --d35-button-color: var(--d35-color-text);
  --d35-button-border: var(--d35-color-border);
  --d35-button-bg-hover: var(--d35-color-surface);
  --d35-button-color-hover: var(--d35-color-text);
  --d35-button-border-hover: color-mix(in srgb, var(--d35-color-text) 24%, transparent);
}

.d35-button--tertiary {
  --d35-button-bg: transparent;
  --d35-button-color: var(--d35-color-text);
  --d35-button-border: transparent;
  --d35-button-bg-hover: color-mix(in srgb, var(--d35-color-text) 6%, transparent);
  --d35-button-color-hover: var(--d35-color-text);
  --d35-button-border-hover: transparent;
  padding-inline: 0;
  border-radius: var(--d35-radius);
}