/* SVG glyphs inside controls that do not expose an image parameter. */
[data-otc-icon-control="tabs"][data-otc-icon] > .rz-tabview-icon,
[data-otc-icon-control="accordion"][data-otc-icon] > button > i.rzi,
[data-otc-icon-control="split-button-item"][data-otc-icon] > .rz-menuitem-link > .rz-menuitem-icon,
.rz-splitbutton > button[aria-haspopup="menu"] > .rzi,
.otc-colored-fab-toggle[aria-expanded="true"] .rzi {
    background-image: var(--otc-icon-light);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent !important;
    inline-size: 1em;
    block-size: 1em;
    overflow: hidden;
    flex-shrink: 0;
}

[data-otc-icon-control="tabs"][data-otc-icon] > .rz-tabview-icon::before,
[data-otc-icon-control="accordion"][data-otc-icon] > button > i.rzi::before,
[data-otc-icon-control="split-button-item"][data-otc-icon] > .rz-menuitem-link > .rz-menuitem-icon::before,
.rz-splitbutton > button[aria-haspopup="menu"] > .rzi::before,
.otc-colored-fab-toggle[aria-expanded="true"] .rzi::before {
    content: none;
}

.otc-colored-fab-toggle {
    /* Keep Radzen's native add glyph and contrast while the menu is closed. */
    --otc-icon-light: none;
    --otc-icon-dark: none;
}

.otc-colored-fab-toggle[aria-expanded="true"] {
    --otc-icon-light: url("icons/colored/close.svg");
    --otc-icon-dark: url("icons/colored/dark/close.svg");
}

.rz-splitbutton > button[aria-haspopup="menu"] > .rzi {
    --otc-icon-light: url("icons/colored/chevron-down.svg");
    --otc-icon-dark: url("icons/colored/dark/chevron-down.svg");
}

.rz-splitbutton[data-otc-dropdown-icon="up"] > button[aria-haspopup="menu"] > .rzi {
    --otc-icon-light: url("icons/colored/chevron-up.svg");
    --otc-icon-dark: url("icons/colored/dark/chevron-up.svg");
}

html[data-otc-theme="dark"] [data-otc-icon-control="tabs"][data-otc-icon] > .rz-tabview-icon,
html[data-otc-theme="dark"] [data-otc-icon-control="accordion"][data-otc-icon] > button > i.rzi,
html[data-otc-theme="dark"] [data-otc-icon-control="split-button-item"][data-otc-icon] > .rz-menuitem-link > .rz-menuitem-icon,
html[data-otc-theme="dark"] .rz-splitbutton > button[aria-haspopup="menu"] > .rzi,
html[data-otc-theme="dark"] .otc-colored-fab-toggle[aria-expanded="true"] .rzi {
    background-image: var(--otc-icon-dark);
}