/* Apex Cosmetics: shared price styles (round 13, owner requirement on price readability). Loaded globally after
   app.css and the scoped-CSS bundle (index.html, Preview/AppHarness/app-harness.html), so storefront, account and admin
   pages can all use the same classes.

   .apx-price                 current price on a light background: navy #10213A, bold.
   .apx-price--on-dark        current price on a dark background: white. A parent .apx-on-dark does the same for every
                              .apx-price / .apx-price__was / .apx-price__label inside it.
   .apx-price__was            the crossed-out original price, in a readable secondary colour:
                              light #5d6b82 (5.3:1 on white, 5.0:1 on ice blue #f2f7fc);
                              dark rgba(255,255,255,.78) (about 10:1 on navy #0b1f3a, 11:1 on #000).
   .apx-price__label          the text label that goes with a struck price ("Sale"), so colour is never the only signal.

   "From", the currency symbol, the decimals and a subscription price sit inside .apx-price and inherit its colour and
   weight: nothing in a price is faded. Prices, discounts and rules are unchanged; this is presentation only. */

.apx-price {
    color: #10213A;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.apx-price *:not(.apx-price__was):not(.apx-price__label) {
    color: inherit;
    font-weight: inherit;
    opacity: 1;
}

.apx-price__was {
    color: #5d6b82;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 1;
}

.apx-price__label {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #10213A;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: middle;
    text-decoration: none;
}

/* Dark backgrounds */
.apx-price.apx-price--on-dark,
.apx-on-dark .apx-price {
    color: #ffffff;
}

.apx-price--on-dark .apx-price__was,
.apx-on-dark .apx-price__was {
    color: rgba(255, 255, 255, .78);
}

.apx-price--on-dark .apx-price__label,
.apx-on-dark .apx-price__label {
    background: #ffffff;
    color: #10213A;
}