/* styles/default/components/c-button.css — #3 tlačítka a skupiny tlačítek
   Created :: 2026-10-21
   Updated :: 2026-10-28
   2026-10-28 :: M9 – úklid a revize (viz 04 kap. 3) */

.c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.c-button:hover { background: var(--color-surface-hover); text-decoration: none; }
.c-button:active { background: var(--color-border); }

/* Varianty */
.c-button--primary { background: var(--color-primary); border-color: transparent; color: var(--color-on-primary); }
.c-button--primary:hover, .c-button--primary:active { background: var(--color-primary-hover); }

.c-button--ghost { background: transparent; border-color: transparent; }
.c-button--ghost:hover { background: var(--color-surface-hover); }
.c-button--ghost:active { background: var(--color-border); }

.c-button--danger { background: var(--color-danger); border-color: transparent; color: var(--color-on-danger); }   /* M9-10, N40 */
.c-button--danger:hover, .c-button--danger:active { filter: brightness(.92); }

.c-button--link { height: auto; padding: 0; border: 0; background: none; color: var(--color-link); font-weight: var(--fw-medium); }
.c-button--link:hover { background: none; text-decoration: underline; text-underline-offset: .15em; }

.c-button--on-dark { background: transparent; border-color: transparent; color: var(--appbar-fg); }
.c-button--on-dark:hover { background: var(--appbar-hover); }
.c-button--on-dark:active, .c-button--on-dark.is-active { background: var(--appbar-active); color: var(--appbar-fg); }

/* Velikosti a tvary */
.c-button--sm { height: var(--control-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-sm); gap: var(--sp-1); border-radius: var(--r-sm); }
.c-button--lg { height: var(--control-h-lg); padding: 0 var(--sp-4); font-size: var(--fs-md); }
.c-button--icon { width: var(--control-h); padding: 0; }
.c-button--icon.c-button--sm { width: var(--control-h-sm); }
.c-button--icon.c-button--lg { width: var(--control-h-lg); }
.c-button--block { display: flex; width: 100%; }

/* Stavy */
.c-button.is-active:not(.c-button--on-dark) { background: var(--color-surface-selected); border-color: var(--color-primary); color: var(--color-primary-text); }
.c-button[disabled], .c-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.c-button.is-loading { pointer-events: none; }
.c-button.is-loading > .c-icon { display: none; }
.c-button.is-loading::before {
  content: "";
  width: var(--icon);
  height: var(--icon);
  flex-shrink: 0;
  border: var(--stroke-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-full);
  animation: c-spin .7s linear infinite;
}
.c-button--sm.is-loading::before { width: var(--icon-sm); height: var(--icon-sm); }

/* Skupina spojených tlačítek */
.c-button-group { display: inline-flex; }
.c-button-group > .c-button { border-radius: 0; }
.c-button-group > .c-button + .c-button { margin-left: -1px; }
.c-button-group > .c-button:first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
.c-button-group > .c-button:last-child { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.c-button-group > .c-button:hover, .c-button-group > .c-button.is-active { z-index: 1; }

/* Mobil: dotykové plochy (03 kap. 14) – běžné tlačítko 4.4rem, malé 3.6rem, ikonové 4.4rem */
@media (max-width: 767.98px) {
  .c-button { min-height: var(--touch-min); }
  .c-button--sm { min-height: 3.6rem; }
  .c-button--link { min-height: 0; }
  .c-button--icon { min-width: var(--touch-min); min-height: var(--touch-min); }
}