/* The side cards and the drawer of tokens (scripts/sidecards.js). */

/* A piece's tooltip takes room only while it's shown: hidden ones right of the column would widen the page.
   Shown, it stands above the side panel (a card's, a token's in the drawer). */
#pieces .tooltiptext { display: none; }
#pieces .tooltiptext[style*="visibility: visible"] { display: block; z-index: 2000002 !important; }

/* The side cards stand in their places: not dragged. */
#pieces .pg-fixed { cursor: default; }

/* The drawer, in the side panel's "Tokens" part: a cell per kind of token, the tokens drawn over it
   (they are pieces of the board, in #pieces, shrunk to fit). */
.pg-drawer {
    position: relative;
    margin-top: 2px;
    border: 1px dashed var(--gp-line, #30343e);
    border-radius: 8px;
    background: var(--gp-bg2, #1c1e24);
}
.pg-drawer-cell {
    position: absolute;
    box-sizing: border-box;
    border-radius: 6px;
}
.pg-drawer-cell:hover { background: rgba(255, 255, 255, 0.04); }
.pg-drawer-label {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    overflow: hidden;
    color: var(--gp-muted, #9a9ca5);
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* How many wait there, at the cell's top right (as the pool's counts) */
.pg-drawer-count {
    position: absolute;
    top: 0;
    right: 1px;
    min-width: 13px;
    padding: 2px 3px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: #141519;
    color: #e8e6e1;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}
.pg-drawer-count:empty { display: none; }
.pg-drawer-empty {
    margin: 0;
    padding: 9px 10px;
    color: var(--gp-muted, #9a9ca5);
    font-size: 12px;
}