/**
 * @file
 * Button SDC styles (SDC-1).
 *
 * Figma icon layout (24×24 frame):
 *   padding 12 top / 16 right / 10 bottom / 24 left · gap 8 · border-box
 */

a.btn {
  --size-button: 19px; /* Figma "Button" — Agenda Bold 19; local to this SDC */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 48px;
  padding: 12px 16px 10px 24px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background: transparent;
  color: var(--color-dark-coral);
  font-family: var(--font-agenda);
  font-size: var(--size-button);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

a.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-outer);
  outline-offset: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

a.btn .btn__label {
  line-height: 1;
}

/* 24×24 icon frame. Beats legacy buttons.css size/margin/fill. */
a.btn .btn__icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
}

a.btn .btn__icon--rotate-180 {
  transform: rotate(180deg);
}

a.btn.btn--filled {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark-coral);
}

a.btn.btn--filled:hover {
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: var(--color-white);
}

a.btn.btn--outline {
  background: transparent;
  border-color: var(--color-dark-coral);
  color: var(--color-dark-coral);
}

a.btn.btn--outline:hover {
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: var(--color-white);
}

a.btn.btn--solid {
  background: var(--color-coral);
  border-color: transparent;
  color: var(--color-white);
}

a.btn.btn--solid:hover {
  background: var(--color-dark-coral-original);
  border-color: var(--color-dark-coral-original);
  color: var(--color-white);
  filter: none;
}

@media (max-width: 640px) {

  a.btn.btn--block {
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {

  a.btn {
    transition: none;
  }
}