@import '_content/SCRM.CardView.Blazor/SCRM.CardView.Blazor.tlwnwvmoi2.bundle.scp.css';

/* /Editors/Voortgang/VoortgangView.razor.rz.scp.css */
/* De hele opmaak van de voortgangsbalk. Alles is van ons, dus het staat hier en niet in een
   <style> of achter ::deep -- op de ene regel na die over het vak van XAF eromheen gaat.

   Maten en kleuren komen uit wat SfStepper tekende, zodat het beeld bij het vervangen gelijk bleef.
   Ze staan hierboven bij elkaar; wie er een thema op wil zetten hoeft alleen die te vervangen. */

.voortgang[b-spa7s1rgnm] {
    --bol: 32px;
    --lijn: 2px;
    --tussenruimte: 8px;
    --actief: #0d6efd;
    --open: #dee2e6;
    --tekst: #212529;
    --mislukt: #dc3545;

    max-width: 100%;
}

.stappen[b-spa7s1rgnm] {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stap[b-spa7s1rgnm] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 0;
}

/* De bol met het pictogram. Het pictogram is een XafImage en kleurt mee met de bol: die zet
   background-color op currentColor, en dat is hier de kleur van de toestand. */
.bol[b-spa7s1rgnm] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--bol);
    height: var(--bol);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--actief);
    color: #fff;
    font: inherit;
}

/* Bewerkbaar is de bol een knop. Uitgeschakeld waar de stap niet bereikbaar is -- bij Linear zijn
   dat alle stappen behalve de buren. Zo laat de balk de regel zien in plaats van hem pas te melden
   als je hem overtreedt. */
button.bol:enabled[b-spa7s1rgnm] {
    cursor: pointer;
}

button.bol:enabled:hover[b-spa7s1rgnm] {
    filter: brightness(0.92);
}

button.bol:focus-visible[b-spa7s1rgnm] {
    outline: 2px solid var(--tekst);
    outline-offset: 2px;
}

.bijschrift[b-spa7s1rgnm] {
    min-width: 0;
    color: var(--actief);
    font-size: 14px;
}

/* Toestanden. Afgelegd en huidig delen de kleur; de huidige krijgt er een ring en vette letter bij
   zodat hij eruit springt zonder een tweede kleur nodig te hebben. */
.stap-open .bol[b-spa7s1rgnm] {
    border: 2px solid var(--open);
    background: #fff;
    color: var(--tekst);
}

.stap-open .bijschrift[b-spa7s1rgnm] {
    color: var(--tekst);
}

.stap-huidig .bol[b-spa7s1rgnm] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--actief);
}

.stap-huidig .bijschrift[b-spa7s1rgnm] {
    font-weight: 600;
}

.stap-mislukt .bol[b-spa7s1rgnm] {
    background: var(--mislukt);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mislukt);
}

.stap-mislukt .bijschrift[b-spa7s1rgnm] {
    color: var(--mislukt);
}

/* Waar het bijschrift staat, bepaalt de richting waarin bol en tekst achter elkaar komen. */
.bijschrift-onder .stap[b-spa7s1rgnm] {
    flex-direction: column;
}

.bijschrift-boven .stap[b-spa7s1rgnm] {
    flex-direction: column-reverse;
}

.bijschrift-na .stap[b-spa7s1rgnm] {
    flex-direction: row;
}

.bijschrift-voor .stap[b-spa7s1rgnm] {
    flex-direction: row-reverse;
}

.bijschrift-onder .bijschrift[b-spa7s1rgnm],
.bijschrift-boven .bijschrift[b-spa7s1rgnm] {
    text-align: center;
}

.bijschrift-voor .bijschrift[b-spa7s1rgnm] {
    text-align: right;
}

/* Verticaal: de balk de hoogte van zijn vak laten aannemen. De stappen krijgen gelijke vakken
   (flex: 1 1 0 hierboven) en verdelen die hoogte dus vanzelf. Dat het vak eromheen een hoogte
   heeft, regelt de align-self in de <style> van de component. */
.voortgang-verticaal[b-spa7s1rgnm] {
    height: 100%;
}

.voortgang-verticaal .stappen[b-spa7s1rgnm] {
    flex-direction: column;
    height: 100%;
}

/* De verbindingslijn loopt van het midden van de vorige bol naar het midden van deze. Waar dat
   midden ligt hangt af van de richting én van de plek van het bijschrift, dus dat staat in twee
   variabelen: langs de as van de balk, en er dwars op. Alle stappen zijn even groot (flex: 1 1 0),
   dus het midden van de vorige ligt precies één stapbreedte terug -- vandaar de 100% hieronder. */
.voortgang-horizontaal.bijschrift-onder[b-spa7s1rgnm] { --bol-langs: 50%;                          --bol-dwars: calc(var(--bol) / 2); }
.voortgang-horizontaal.bijschrift-boven[b-spa7s1rgnm] { --bol-langs: 50%;                          --bol-dwars: calc(100% - var(--bol) / 2); }
.voortgang-horizontaal.bijschrift-na[b-spa7s1rgnm]    { --bol-langs: calc(var(--bol) / 2);         --bol-dwars: 50%; }
.voortgang-horizontaal.bijschrift-voor[b-spa7s1rgnm]  { --bol-langs: calc(100% - var(--bol) / 2);  --bol-dwars: 50%; }
.voortgang-verticaal.bijschrift-onder[b-spa7s1rgnm]   { --bol-langs: calc(var(--bol) / 2);         --bol-dwars: 50%; }
.voortgang-verticaal.bijschrift-boven[b-spa7s1rgnm]   { --bol-langs: calc(100% - var(--bol) / 2);  --bol-dwars: 50%; }
.voortgang-verticaal.bijschrift-na[b-spa7s1rgnm]      { --bol-langs: 50%;                          --bol-dwars: calc(var(--bol) / 2); }
.voortgang-verticaal.bijschrift-voor[b-spa7s1rgnm]    { --bol-langs: 50%;                          --bol-dwars: calc(100% - var(--bol) / 2); }

.stap + .stap[b-spa7s1rgnm]::before {
    content: '';
    position: absolute;
    background: var(--actief);
}

/* Grijs zolang de stap nog niet bereikt is: de lijn hoort bij de stap waar zij naartoe loopt. */
.stap + .stap-open[b-spa7s1rgnm]::before {
    background: var(--open);
}

.voortgang-horizontaal .stap + .stap[b-spa7s1rgnm]::before {
    top: calc(var(--bol-dwars) - var(--lijn) / 2);
    right: calc(100% - var(--bol-langs) + var(--bol) / 2 + var(--tussenruimte));
    left: calc(var(--bol-langs) - 100% + var(--bol) / 2 + var(--tussenruimte));
    height: var(--lijn);
}

.voortgang-verticaal .stap + .stap[b-spa7s1rgnm]::before {
    top: calc(var(--bol-langs) - 100% + var(--bol) / 2 + var(--tussenruimte));
    bottom: calc(100% - var(--bol-langs) + var(--bol) / 2 + var(--tussenruimte));
    left: calc(var(--bol-dwars) - var(--lijn) / 2);
    width: var(--lijn);
}