/*
    Aanpassingen op het design system die alleen voor deze portal gelden.

    Ongescopeerd en niet in MainLayout.razor.css, want ::deep daaruit bereikt de navbalk niet:
    CdNavBar rendert zijn eigen <nav>, en die draagt het scope-id van MainLayout niet. De regels
    hieronder haalden het dus nooit, terwijl er geen fout was om dat te merken.

    Geladen na cashdesk-design-system.css, dus deze winnen op volgorde zonder !important.
*/

/*
    De navbalk, tijdelijk.

    Het design system geeft elk item `flex: 1 1 0`, zodat ze de balk gelijk verdelen. Met vier
    items op een breed scherm werd dat 412px per stuk terwijl er zestig nodig is, en stonden de
    overige zes achter de meer-knop met de balk half leeg ernaast.

    `flex: 0 1 70px` en niet `0 0`: op een telefoon passen tien items van 70px niet, en krimpen
    is daar beter dan overlopen. Dit is een tussenstap tot de herindeling met minder
    bestemmingen -- daarna hoort dit hier weg, of naar CdNavBar zelf als het dan nog nodig is.
*/
.navbar {
    justify-content: center;
}

.navbar-item,
.navbar-more {
    flex: 0 1 70px;
}

/*
    Op een smal scherm alleen iconen.

    De balk is `display: flex` zonder `flex-wrap`, dus de standaard is `nowrap`: met alle
    bestemmingen erop krimpen de items in plaats van af te breken. Gemeten op een balk van 390px
    werden het tien items van 39px met alle tien de labels afgekapt -- tekst die er wel staat maar
    niet te lezen is. Zonder labels past dezelfde rij wel: een icoon is 18px in een vakje van 39.

    Het label wordt weggeknipt en niet op `display: none` gezet, want dan verdwijnt het ook voor
    een schermlezer en is er van "Coupons" niets meer over dan een schuine streep met twee
    rondjes.

    ⚠️ Iconen alleen zijn hier niet zelfverklarend. Tijden, Loyalty en Zakelijk zijn een kalender,
    een ticket en een document, en die drie zijn zonder tekst niet uit elkaar te houden. Dit past
    binnen de herindeling waarin er minder bestemmingen komen; bij vijf of zes is er ruimte voor
    tekst en hoort dit blok weg.

    Vanaf 720px staat er weer tekst: tien items van 70px is 700px.
*/
@media (max-width: 720px) {
    .navbar-item,
    .navbar-more {
        flex: 1 1 0;
    }

    .navbar-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* De iconen mogen groter nu ze het alleen doen. */
    .navbar-item svg {
        width: 22px;
        height: 22px;
    }
}