/* Przyciski. Wariant niesie rolę, rozmiar niesie wagę w układzie. */

.dat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: var(--control-height-md);
    padding: 0 var(--space-4);
    border: var(--border-width) solid transparent;
    border-radius: var(--btn-radius-md);
    font-size: var(--text-small-size);
    font-weight: var(--text-title-weight);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.dat-btn:disabled, .dat-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Podwójny pierścień z odsadzeniem w kolorze tła — na kolorowym przycisku
   zwykły outline ginie w jego własnym tle. */
.dat-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-gap) var(--color-bg), 0 0 0 var(--focus-width) var(--color-accent);
}

.dat-btn--primary { background: var(--color-accent); color: var(--color-accent-fg); }
.dat-btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-fg); text-decoration: none; }
.dat-btn--primary:active { background: var(--color-accent-active); }

.dat-btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    font-weight: var(--text-subtitle-weight);
}
.dat-btn--secondary:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }

.dat-btn--ghost {
    padding: 0 var(--space-3);
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: var(--text-subtitle-weight);
}
.dat-btn--ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }

.dat-btn--destructive { background: var(--color-danger); color: var(--color-danger-fg); }
.dat-btn--destructive:hover { background: var(--color-danger); color: var(--color-danger-fg); filter: brightness(.94); text-decoration: none; }

.dat-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); border-radius: var(--btn-radius-sm); font-size: var(--text-overline-size); }
.dat-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-6); border-radius: var(--btn-radius-lg); font-size: var(--text-body-size); }

/* Po rozmiarach, żeby złączenie z --sm/--lg zawsze dawało height: auto z
   zamiaru kolejności w arkuszu, a nie przypadkiem. */
.dat-btn--link {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.dat-btn--icon { width: var(--control-height-md); padding: 0; }
.dat-btn--icon.dat-btn--sm { width: var(--control-height-sm); }

.dat-btn__label { display: inline-block; }

.dat-btn.is-loading { pointer-events: none; }
.dat-btn.is-loading .dat-btn__spinner { animation: dat-spin var(--duration-spinner) linear infinite; }