.deco{
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;

    &.bt{
        bottom: 0;
    }
    &.tp{
        top: 0;
    }
}
svg{
    &[aria-hidden="true"]{
        visibility: visible !important;
    }
}
[data-colors="primary-dark"]{
    .flr_hd rect{
        fill: white;
    }
    [data-role="arrows"]{
        [data-action="Next"], [data-action="Prev"]{
            color: white;
            svg{
                path:last-child{
                    fill: #147a3e;
                }
            }
        }
        
    }
}



/* Flair alignment
   The Header snippet renders two flairs — FlairLeft (.flr_hd.left) and
   FlairWide (.flr_hd.wide) — and shows only the one that matches the header's
   text alignment. Left-aligned headers (default) get the left flair; centered
   headers (`ta_`) get the wide flair. These rules only match when both modifier
   classes are present, so single-flair headers elsewhere are unaffected. */

/* Default (left-aligned header): show the left flair, hide the wide one */
.flr_hd.wide {
    display: none;
}

/* Centered header (`ta_`): show the wide flair, hide the left one */
.ta_ .flr_hd.left {
    display: none;
}

.ta_ .flr_hd.wide {
    display: block;
}