/* Schenk Recycling Openingstijden */

/* Status: bolletje voor de tekst, groen = open, rood = gesloten */
.schenk-ot__bolletje {
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-right: .45em;
    border-radius: 100%;
    vertical-align: .05em;
    background: #bbb;
}
.schenk-ot.is-open .schenk-ot__bolletje {
    background: var(--schenk-ot-open);
}
.schenk-ot.is-gesloten .schenk-ot__bolletje {
    background: var(--schenk-ot-gesloten);
}

/* Status onder elkaar: bolletje links naast de eerste regel, "tot 16.45 uur" eronder.
   inline-grid, zodat het blok als geheel links/midden/rechts uitgelijnd kan worden. */
.schenk-ot--stacked:has( > .schenk-ot__bolletje ) {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: start;
}
.schenk-ot--stacked .schenk-ot__bolletje {
    margin-top: .45em;
    margin-top: calc( ( 1lh - .6em ) / 2 );
}
.schenk-ot--stacked .schenk-ot__label,
.schenk-ot--stacked .schenk-ot__detail {
    display: block;
}

/* Weekoverzicht */
.schenk-ot__week {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}
.schenk-ot__week th,
.schenk-ot__week td {
    padding: .25em 0;
    border: 0;
    background: none;
    text-align: left;
    vertical-align: top;
}
.schenk-ot__week th {
    padding-right: 1.5em;
    font-weight: inherit;
    white-space: nowrap;
}
.schenk-ot__dag.is-vandaag th,
.schenk-ot__dag.is-vandaag td {
    font-weight: 700;
}
.schenk-ot__omschrijving {
    opacity: .75;
}
.schenk-ot__kort,
.schenk-ot__afwijkend {
    margin: 0;
    padding: 0;
    list-style: none;
}
.schenk-ot__afwijkend {
    margin-top: .5em;
}

/*
 * Statusbolletje op een Beaver Builder-module: geef de module onder Geavanceerd → CSS-class
 * de class "schenk-status-bolletje". Groen als Schenk open is, grijs als gesloten.
 * Bij een icoon staat het bolletje rechtsonder op het icoon, anders rechtsboven op de module.
 * Kleuren aanpasbaar via --schenk-ot-open / --schenk-ot-gesloten.
 */
:root {
    --schenk-ot-open: #15c700;
    --schenk-ot-gesloten: #9ca3af;
}
.schenk-status-bolletje .fl-icon {
    position: relative;
}
.schenk-status-bolletje:not(:has(.fl-icon)) {
    position: relative;
}
html.schenk-is-open .schenk-status-bolletje .fl-icon:before,
html.schenk-is-gesloten .schenk-status-bolletje .fl-icon:before,
html.schenk-is-open .schenk-status-bolletje:not(:has(.fl-icon)):after,
html.schenk-is-gesloten .schenk-status-bolletje:not(:has(.fl-icon)):after {
    content: "";
    position: absolute;
    right: 5px;
    z-index: 1;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--schenk-ot-open);
}
html.schenk-is-open .schenk-status-bolletje .fl-icon:before,
html.schenk-is-gesloten .schenk-status-bolletje .fl-icon:before {
    bottom: 5px;
}
html.schenk-is-open .schenk-status-bolletje:not(:has(.fl-icon)):after,
html.schenk-is-gesloten .schenk-status-bolletje:not(:has(.fl-icon)):after {
    top: 5px;
}
html.schenk-is-gesloten .schenk-status-bolletje .fl-icon:before,
html.schenk-is-gesloten .schenk-status-bolletje:not(:has(.fl-icon)):after {
    background: var(--schenk-ot-gesloten);
}