/* ========================================================
   LOYVIA GLOBAL SAUDI RIYAL SYMBOL V1
   ======================================================== */

.loyvia-riyal-symbol{
    display:inline-block;

    width:.82em;
    height:1em;

    flex:0 0 auto;

    margin-inline:.10em;

    vertical-align:-.14em;

    background-color:currentColor;

    -webkit-mask-image:
        url("/static/brand/saudi-riyal-symbol.svg");

    mask-image:
        url("/static/brand/saudi-riyal-symbol.svg");

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

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

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


/*
Keep the symbol aligned correctly inside
small KPI labels, pills and table cells.
*/

small .loyvia-riyal-symbol,
.pill .loyvia-riyal-symbol,
.metric .loyvia-riyal-symbol,
td .loyvia-riyal-symbol,
th .loyvia-riyal-symbol{
    width:.80em;
    height:.95em;
}


/*
The symbol follows currentColor, therefore
it automatically inherits dark/light/status colors.
*/

.loyvia-riyal-symbol[data-loyvia-riyal]{
    color:inherit;
}


@media print{

    .loyvia-riyal-symbol{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

}
/* ========================================================
   LOYVIA GLOBAL SAUDI RIYAL LAYOUT V1.1
   ======================================================== */

.loyvia-money-primary{
    display:inline-flex;
    align-items:baseline;
    gap:.16em;
    white-space:nowrap;
}

.loyvia-money-primary
.loyvia-riyal-symbol{
    margin-inline:0;
    flex:0 0 auto;
}


/*
Prevent KPI descriptions from inheriting
currency spacing after the symbol is moved.
*/

.loyvia-riyal-normalized-label{
    display:inline;
}