/*
------------------------------------------------------------
DINGETHAL.DESIGN

Projekt:
arsvenditio · CSS-Core

Komponente:
Globale Standardbuttons

Datei:
buttons.css

Version:
0.2.0

Grundsatz:
Die Komponente definiert ausschließlich Gestaltung und
Interaktionsverhalten. Buttontext und Klickfunktion bleiben
frei im jeweiligen HTML beziehungsweise JavaScript wählbar.
------------------------------------------------------------
*/

.ars-button {
    appearance: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 9px 28px;

    border: var(--ars-button-border-width, 2px) solid var(--ars-color-black, #000000);
    border-radius: 0;

    background: var(--ars-color-white, #ffffff);
    color: var(--ars-color-black, #000000) !important;

    font-family: var(--ars-font-body-bold, "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color var(--ars-transition-fast, 180ms ease),
        color var(--ars-transition-fast, 180ms ease),
        border-color var(--ars-transition-fast, 180ms ease);
}

.ars-button:hover,
.ars-button:focus-visible {
    border-color: var(--ars-color-black, #000000);
    background: var(--ars-color-black, #000000);
    color: var(--ars-color-white, #ffffff) !important;
}

.ars-button:focus-visible {
    outline: var(--ars-focus-width, 3px) solid var(--ars-color-primary, #cf0e12);
    outline-offset: 4px;
}

.ars-button--full {
    width: 100%;
}