/**
 * Przyciski.
 *
 * Rozmiar:  .button--xs  .button--sm  .button--md  .button--lg  .button--xl
 *           Bez klasy rozmiaru obowiazuje md.
 *
 * Wariant:  .button--filled     pelne tlo w kolorze marki (domyslny)
 *           .button--tonal      przygaszone tlo marki, ciemniejszy tekst
 *           .button--outlined   sama ramka i tekst w kolorze marki
 *           .button--ghost      bez tla i ramki, tekst w kolorze marki
 *           .button--inverted   na ciemnym tle: biala ramka i bialy tekst
 *           .button--white      biale tlo, ciemny tekst; na dowolnym tle
 *           .button--text       odnosnik w stylu przycisku
 *
 * Wariant nadpisuje domyslny przez kolejnosc w pliku, nie przez lancuchy
 * :not(). Dodanie nowego wariantu to jedna regula i nic wiecej.
 *
 * Zgodnosc wstecz: --primary to alias --filled, --outline to --outlined,
 * a --secondary i --alt zostaja jako jasny szary przycisk uzywany w motywie.
 */

/* —— Baza —— */
.button,
.wp-block-button__link,
button,
input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    border-radius: var(--radius-lg);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-style: solid;
    border-width: var(--border-width);
    line-height: 1.35;
    transition: background-color .2s, color .2s, border-color .2s, opacity .2s
}

.button:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px
}

/* Na ciemnym tle zielony obrys ma za maly kontrast. */
.button--inverted:focus-visible,
.button--white:focus-visible {
    outline-color: var(--color-white)
}

/* —— Rozmiary. Skala tekstu ta sama, co --text-*. —— */
.button--md,
.button,
.wp-block-button__link,
button:not(.slick-arrow),
input[type=submit] {
    min-height: var(--control-md);
    padding: .5rem 1rem;
    font-size: var(--text-sm-size)
}

.button--xs:not(.button--text) {
    min-height: var(--control-xs);
    padding: .25rem .625rem;
    font-size: var(--text-xs-size)
}

.button--sm:not(.button--text) {
    min-height: var(--control-sm);
    padding: .375rem .875rem;
    font-size: var(--text-sm-size)
}

.button--md:not(.button--text) {
    min-height: var(--control-md);
    padding: .5rem 1rem;
    font-size: var(--text-sm-size)
}

.button--lg:not(.button--text) {
    min-height: var(--control-lg);
    padding: .75rem 1.5rem;
    font-size: var(--text-base-size)
}

.button--xl:not(.button--text) {
    min-height: var(--control-xl);
    padding: 1rem 2rem;
    font-size: var(--text-lg-size)
}

/* —— Wariant domyslny: filled —— */
.button,
.wp-block-button__link,
button:not(.slick-arrow),
input[type=submit] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white)
}

.button:hover,
.wp-block-button__link:hover,
button:not(.slick-arrow):hover,
input[type=submit]:hover {
    opacity: .75;
    color: var(--color-white)
}

/* —— Filled —— */
.button--filled,
.button--primary,
input[type=submit].button--filled,
input[type=submit].button--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white)
}

.button--filled:hover,
.button--primary:hover {
    opacity: .75;
    color: var(--color-white)
}

/* —— Tonal —— */
.button--tonal,
input[type=submit].button--tonal {
    background: var(--color-primary-50);
    border-color: transparent;
    color: var(--color-primary-700);
    opacity: 1
}

.button--tonal:hover {
    background: rgb(var(--color-primary-rgb) / .16);
    border-color: transparent;
    color: var(--color-primary-700);
    opacity: 1
}

/* —— Outlined —— */
.button--outlined,
.button--outline,
input[type=submit].button--outlined,
input[type=submit].button--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    opacity: 1
}

.button--outlined:hover,
.button--outline:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    opacity: 1
}

/* —— Ghost —— */
.button--ghost,
input[type=submit].button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary);
    opacity: 1
}

.button--ghost:hover {
    background: rgb(var(--color-primary-rgb) / .08);
    border-color: transparent;
    color: var(--color-primary);
    opacity: 1
}

/* —— Inverted: do uzycia na ciemnym tle —— */
.button--inverted,
input[type=submit].button--inverted {
    background: transparent;
    border-color: rgb(var(--color-white-rgb) / .4);
    color: var(--color-white);
    opacity: 1
}

.button--inverted:hover {
    background: rgb(var(--color-white-rgb) / .12);
    border-color: var(--color-white);
    color: var(--color-white);
    opacity: 1
}

/* —— White —— */
.button--white,
input[type=submit].button--white {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-base-text);
    opacity: 1
}

/* Nie --color-light-grey: przy bieli daje roznice trzech jednostek na kanal,
   czyli hover, ktorego nie widac. */
.button--white:hover {
    background: var(--color-grey);
    border-color: var(--color-grey);
    color: var(--color-base-text);
    opacity: 1
}

/* —— Secondary / alt: jasny szary, uzywany w motywie —— */
.button--secondary,
.button--alt,
input[type=submit].button--secondary,
input[type=submit].button--alt {
    background: var(--color-light-grey);
    border-color: var(--color-grey);
    color: var(--color-base-text);
    opacity: 1
}

.button--secondary:hover,
.button--alt:hover {
    background: var(--color-grey);
    border-color: var(--color-grey);
    color: var(--color-base-text);
    opacity: 1
}

/* —— Text: odnosnik w stylu przycisku —— */
.button--text {
    min-height: 0;
    padding: .35rem .5rem;
    background: transparent;
    border-color: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm-size);
    text-decoration: underline;
    text-underline-offset: .15em;
    opacity: 1
}

.button--text.button--xs {
    padding: .2rem .35rem;
    font-size: var(--text-xs-size)
}

.button--text.button--sm {
    padding: .25rem .4rem;
    font-size: var(--text-xs-size)
}

.button--text.button--lg {
    padding: .35rem .75rem;
    font-size: var(--text-base-size)
}

.button--text.button--xl {
    padding: .4rem 1rem;
    font-size: var(--text-lg-size)
}

.button--text:hover {
    opacity: .75;
    color: var(--color-primary)
}

/* —— Wcisniecie. Jeden efekt dla wszystkich wariantow, zeby przycisk
   dawal odpowiedz na klikniecie, a nie tylko na najechanie. —— */
.button:active,
.wp-block-button__link:active,
button:not(.slick-arrow):active,
input[type=submit]:active {
    transform: translateY(1px)
}

.button[disabled]:active,
.button[aria-disabled="true"]:active,
button[disabled]:active,
input[type=submit][disabled]:active {
    transform: none
}

/* Caps tylko na zadanie */
.button--uppercase {
    text-transform: uppercase;
    letter-spacing: .04em
}

/* —— Legacy: zolty akcent z menu —— */
.button.yellow {
    background: var(--color-amber);
    border-color: var(--color-amber);
    color: var(--color-secondary-900)
}

.button.yellow:hover {
    color: var(--color-secondary-900);
    opacity: .85
}

/* —— Stan ladowania —— */
.button__text {
    transition: opacity .2s, visibility .2s
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite
}

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

    .button,
    .wp-block-button__link,
    button,
    input[type=submit] {
        transition: none
    }

    .button:active,
    button:active,
    input[type=submit]:active {
        transform: none
    }

    .button--loading::after {
        animation-duration: 3s
    }
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn)
    }

    to {
        transform: rotate(1turn)
    }
}

/* <a> nie przyjmuje atrybutu disabled, wiec odnosnik wylaczony oznacza sie
   przez aria-disabled="true". Wyglad i brak reakcji musza byc te same. */
.button[disabled],
.button[aria-disabled="true"],
.wp-block-button__link[aria-disabled="true"],
button[disabled],
input[type=submit][disabled] {
    opacity: .5;
    cursor: not-allowed
}

.button[aria-disabled="true"] {
    pointer-events: none
}

.button[disabled]:hover,
.button[aria-disabled="true"]:hover,
button[disabled]:hover,
input[type=submit][disabled]:hover {
    opacity: .5
}

.button a:hover {
    color: inherit !important
}