/* https://piccalil.li/blog/how-i-build-a-button-component/ */

.kz-button {
  /* Configuration */
  --button-padding: var(--space-s);
  --button-gap: var(--space-2xs);
  --button-bg: var(--color-klezmer-life);
  --button-color: var(--color-klezmer-earth--shade-10);
  --button-text-size: var(--step-0);
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: var(--color-klezmer-life);
  --button-radius: 50px;

  --button-hover-bg: var(--color-klezmer-earth--tint-10);
  --button-hover-color: var(--color-klezmer-light);
  --button-hover-border-color: var(--color-klezmer-earth--tint-10);

  --button-outline-width: 2px;
  --button-outline-style: solid;
  --button-outline-color: var(--color-utility-orange);
  --button-outline-offset: 2px;

  /* Layout and spacing */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);

  /* Colors */
  background: var(--button-bg);
  color: var(--button-color);

  /* Stroke and radius */
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);

  /* Typography */
  text-decoration: none;
  font-family: var(--font-main);
  font-size: var(--button-text-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-condensed);

  /* Interactive */
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.kz-button svg {
  flex: none;
  height: 1em;
  width: 1em;
}

.kz-button:hover,
.kz-button:focus-visible {
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border-color);
  color: var(--button-hover-color);
}

.kz-button:focus-visible {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(--button-outline-offset, var(--button-border-width));
}

.kz-button:active {
  background-color: var(--button-bg);
  transform: scale(98%);
}

.kz-button[data-button-variant='positive'] {
  --button-bg: var(--color-klezmer-growth);
  --button-color: var(--color-light);
  --button-border-color: var(--color-klezmer-growth);
}

.kz-button[data-button-variant='neutral'] {
  --button-bg: var(--color-klezmer-earth);
  --button-color: var(--color-light);
  --button-border-color: var(--color-klezmer-earth);
}

.kz-button[data-ghost-button=''] {
  --button-bg: transparent;
  --button-color: var(--button-border-color);
}

.kz-button[data-button-size='small'] {
  --button-padding: var(--space-xs);
  --button-text-size: var(--step--1);
}