/* Derivatives data pages on live data (open interest, funding rates, liquidations): series colours, the chart's
 * x labels placed on their points, bars, the hover line / point / tooltip in the design's look, heat dots of the
 * funding table. Loaded by inc/live/data-b.php on these pages only. */

/* series colours (dark / light, the design's) */
main [data-wc-db] { --db-c: #2997FF; --db-bar: rgb(255, 69, 58); --db-tipv: rgb(215, 0, 21); }
main [data-db-ser="oi-btc"], main [data-db-ser="fr-btc"] { --db-c: #FF9F0A; }
main [data-db-ser="oi-eth"], main [data-db-ser="fr-eth"], main [data-db-ser="fr-sol"] { --db-c: #BF8CFF; }
main [data-db-ser="liq-short"] { --db-bar: rgb(48, 209, 88); --db-tipv: rgb(36, 138, 61); }
html[data-theme=light] main [data-wc-db] { --db-c: #0071E3; --db-bar: rgb(215, 0, 21); --db-tipv: rgb(255, 69, 58); }
html[data-theme=light] main [data-db-ser="oi-btc"], html[data-theme=light] main [data-db-ser="fr-btc"] { --db-c: #C93400; }
html[data-theme=light] main [data-db-ser="oi-eth"], html[data-theme=light] main [data-db-ser="fr-eth"], html[data-theme=light] main [data-db-ser="fr-sol"] { --db-c: #7B3FE4; }
html[data-theme=light] main [data-db-ser="liq-short"] { --db-bar: rgb(36, 138, 61); --db-tipv: rgb(48, 209, 88); }
main [data-wc-db] [data-db="plot"] path[data-db-line] { stroke: var(--db-c); }
main [data-wc-db] [data-db="plot"] stop { stop-color: var(--db-c); }

/* x labels on the points they name: wide screens / phones */
main [data-wc-db] [data-db="x"] > [data-db-xl="1"] { left: var(--db-xw) !important; transform: translateX(calc(var(--db-xw) * -1)) !important; }
@media (width < 700px) {
  main [data-wc-db] [data-db="x"] > [data-db-xl="1"] { left: var(--db-xp) !important; transform: translateX(calc(var(--db-xp) * -1)) !important; }
}

/* bars (liquidations) */
main .wc-db-bar { position: absolute; transform: translateX(-50%); border-radius: 2px; background: var(--db-bar); pointer-events: none; }

/* hover: line, point and tooltip as the design draws them */
main .wc-db-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.24); pointer-events: none; }
main .wc-db-d { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--db-c); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); pointer-events: none; }
main .wc-db-tip { position: absolute; z-index: 3; top: 4px; min-width: 176px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgb(245, 245, 247); color: rgb(29, 29, 31); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: none; }
main .wc-db-tt { font-size: 12px; font-weight: 600; color: rgb(110, 110, 115); white-space: nowrap; }
main .wc-db-tr { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-size: 13px; white-space: nowrap; }
main .wc-db-tl { color: rgb(110, 110, 115); }
main .wc-db-tr b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgb(29, 29, 31); }
main [data-db-ser^="liq-"] .wc-db-tr b { color: var(--db-tipv); }
html[data-theme=light] main .wc-db-v { background: rgba(0, 0, 0, 0.24); }
html[data-theme=light] main .wc-db-d { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14); }
html[data-theme=light] main .wc-db-tip { background: rgb(29, 29, 31); color: #FFFFFF; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }
html[data-theme=light] main .wc-db-tt, html[data-theme=light] main .wc-db-tl { color: rgb(134, 134, 139); }
html[data-theme=light] main .wc-db-tr b { color: #FFFFFF; }
html[data-theme=light] main [data-db-ser^="liq-"] .wc-db-tr b { color: var(--db-tipv); }

/* funding table: heat dots, stronger for larger rates (green: longs pay, red: shorts pay) */
main [data-wc-dot="up"] { background: rgba(48, 209, 88, var(--wc-a, 0.2)) !important; }
main [data-wc-dot="dn"] { background: rgba(255, 69, 58, var(--wc-a, 0.2)) !important; }
main [data-wc-dot="flat"], main [data-wc-dot=""] { background: transparent !important; }
html[data-theme=light] main [data-wc-dot="up"] { background: rgba(36, 138, 61, var(--wc-a, 0.2)) !important; }
html[data-theme=light] main [data-wc-dot="dn"] { background: rgba(215, 0, 21, var(--wc-a, 0.2)) !important; }
/* phones: the rate needs the dot's room (else it is cut to "0.0022…") */
@media (width < 700px) {
  main [data-wc-dot] { display: none !important; }
}

/* liquidations by exchange, phones: the Split column ("56% longs") gets the room the short exchange names leave
   (the design's equal columns cut it to "56% lon…") */
@media (width < 480px) {
  body.wc-data-liquidations main section[data-screen-label="By exchange"] [role="table"] > [role="row"] {
    grid-template-columns: minmax(0, 1.2fr) minmax(56px, 1fr) minmax(44px, 0.8fr) minmax(76px, 1.4fr) !important;
  }
}
@media (width < 360px) {
  body.wc-data-liquidations main section[data-screen-label="By exchange"] [role="table"] > [role="row"] { column-gap: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  main [data-wc-db] * { transition: none !important; }
}

/* a range tab with no history of its own yet (its records start where the shorter range's do): off, the title
   says why (wc_db_ranges in inc/live/data-b.php, avail in assets/js/live/data-b.js) */
main [data-wc-db] [data-db="range"] button[aria-disabled="true"] { opacity: 0.35; cursor: default; }