/* Shared sizing and surface selection for the OTCValue vector icon collection. */
img[src*="icons/colored/"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Use the existing bright artwork on dark workspace and overlay surfaces. */
html[data-otc-theme="dark"] img[src*="icons/colored/"] {
    content: var(--otc-icon-dark);
}

/* These glyphs are buttons themselves; retain their original hit areas. */
button.rzi.rz-grid-filter-icon,
button.rzi.rz-cell-filter-clear {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    color: transparent !important;
    text-shadow: none !important;
}

button.rzi.rz-grid-filter-icon {
    background-image: url("icons/colored/filter.svg");
}

button.rzi.rz-cell-filter-clear {
    background-image: url("icons/colored/close.svg");
}

.rz-column-drag::after {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    background: url("icons/colored/more.svg") center / contain no-repeat;
    transform: rotate(90deg);
}

html[data-otc-theme="dark"] button.rzi.rz-grid-filter-icon {
    background-image: url("icons/colored/dark/filter.svg");
}

html[data-otc-theme="dark"] button.rzi.rz-cell-filter-clear {
    background-image: url("icons/colored/dark/close.svg");
}

html[data-otc-theme="dark"] .rz-column-drag::after {
    background-image: url("icons/colored/dark/more.svg");
}