/*
|--------------------------------------------------------------------------
| Icons the site draws that Bootstrap Icons does not have
|--------------------------------------------------------------------------
|
| Bootstrap Icons is two thousand pictures and none of them is a child in a
| swimming pool, which is one of the things a hotel here most wants to say. So
| this file adds names to the bi- namespace that the font has no glyph for, and
| they are used exactly like the real ones: <i class="bi bi-kids-pool">. Every
| place that draws a highlight - the publish form, the offer page, the admin
| picker, its preview, the list column - goes on emitting the same markup and
| needs no branch for these.
|
| Not in the font, though, and it cannot be: a font glyph is a filled outline
| and these are strokes, so adding one would mean converting it and
| regenerating a package we take verbatim. These are CSS masks instead - the
| shape comes from an SVG's alpha and the colour from background-color, which
| is what makes them inherit colour and size off font-size the way a glyph
| does.
|
| Plain CSS and not in resources/css, deliberately. Three places need these
| rules - the site, the admin panel, and the admin's own copy of the icon font
| in public/vendor - and only the first goes through Vite. One file linked in
| all three is less to keep in step than one rule copied twice, and it means an
| unbuilt deploy loses nothing here. See the render hook in AdminPanelProvider
| and the link in layouts/app.blade.php.
|
| The mask URLs are relative, so they resolve against this file wherever the
| app is mounted.
|
*/


/*
| bi-kids-pool
|
| Two masks, not one: a mask is a single alpha channel painted one colour, and
| the water is blue while the child takes the colour of whatever it sits in. So
| the figure is ::before on currentColor and the water is ::after on a variable,
| stacked in register on the same 16x16 box.
|
| That spends both pseudo-elements on the <i>. Nothing else uses them there -
| the icon font's own rule sets properties on ::before but no content - so this
| is safe, but it is the reason a two-colour custom icon costs more than a
| one-colour one.
*/

.bi-kids-pool {

    /* The blue by default, everywhere. Only the unticked chip on the publish
       form takes it off again, which is one rule rather than one per context.
       Deep enough to carry the same visual weight as the figure beside it: a
       lighter blue reads as thinner strokes rather than as bluer water. */

    --kids-pool-water: #1b7fa8;

    position: relative;

    display: inline-block;

    width: 1em;
    height: 1em;

    vertical-align: -0.125em;

}

.bi-kids-pool::before,
.bi-kids-pool::after {

    content: "";

    position: absolute;

    inset: 0;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

}

.bi-kids-pool::before {

    background-color: currentColor;

    -webkit-mask-image: url("kids-pool-figure.svg");
    mask-image: url("kids-pool-figure.svg");

}

.bi-kids-pool::after {

    background-color: var(--kids-pool-water, currentColor);

    -webkit-mask-image: url("kids-pool-water.svg");
    mask-image: url("kids-pool-water.svg");

}


/*
| The one place the blue is wrong
|
| An unticked chip on the publish form is grey all over, label and icon
| together, and that greyness is what says "not chosen". Blue water in it would
| read as chosen, or as a bug. Back to currentColor and it greys and ungreys
| with everything else in the chip.
*/

.offer-highlight-option input:not(:checked) + .offer-highlight-chip .bi-kids-pool {

    --kids-pool-water: currentColor;

}