/* Buttons. On <a> or <button>, always with one colour variant:
 *   <a class="ui-button ui-button--primary" href="...">Pieteikties nodarbībai</a>
 * --primary  brand fill, for the one main action of a screen
 * --light    cream fill, the main action on the dark band
 * --outline, --outline-light   the second action, on light and on dark
 * --block    full width, taller (phones)
 * --small    tighter padding; the touch height stays 44 px
 */

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  min-height: var(--ui-touch);
  padding: var(--ui-space-3) var(--ui-space-6);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ui-duration), border-color var(--ui-duration), color var(--ui-duration);
}

.ui-button--primary {
  background: var(--ui-color-brand);
  color: var(--ui-color-on-band);
}

.ui-button--primary:hover {
  background: var(--ui-color-brand-hover);
  color: var(--ui-color-on-band);
}

.ui-button--light {
  background: var(--ui-color-on-band);
  color: var(--ui-color-ink-strong);
}

.ui-button--light:hover {
  background: var(--ui-color-card);
  color: var(--ui-color-ink-strong);
}

.ui-button--outline {
  border-color: var(--ui-color-line-button);
  color: var(--ui-color-ink-nav);
  font-weight: var(--ui-weight-medium);
}

.ui-button--outline:hover {
  background: var(--ui-color-sunken);
  color: var(--ui-color-ink);
}

.ui-button--outline-light {
  border-color: var(--ui-color-on-band-outline);
  color: var(--ui-color-on-band);
  font-weight: var(--ui-weight-medium);
}

.ui-button--outline-light:hover {
  background: var(--ui-color-on-band-fill);
  color: var(--ui-color-on-band);
}

.ui-button--light:focus-visible,
.ui-button--outline-light:focus-visible {
  outline-color: var(--ui-color-focus-on-band);
}

.ui-button--block {
  display: flex;
  width: 100%;
  min-height: var(--ui-touch-lg);
}

.ui-button--small {
  padding: var(--ui-space-2) var(--ui-space-4);
  font-size: var(--ui-text-sm);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}