:root {
    --ds-vb-module-selection-icon-color: #ffffff;
    --ds-vb-module-selection-text-color: #ffffff;
    --ds-vb-module-selection-background-color: #2c3d49;
}

/* ---- Divi 5 Add Module modal ---- */
/* button[value^="ds/"] = module tiles; button[value="divi-sensei"] = the module folder tile. */

button[value^="ds/"],
button[value="divi-sensei"] {
	background-color: var(--ds-vb-module-selection-background-color) !important;
	color: var(--ds-vb-module-selection-text-color) !important;
    font-size: 10px !important;
    padding: 5px !important;
	border: none !important;
}

button[value^="ds/"] div svg,
button[value="divi-sensei"] div svg {
    fill: var(--ds-vb-module-selection-icon-color) !important;
    scale: 0.8;
    stroke: var(--ds-vb-module-selection-icon-color) !important;
    stroke-width: 0;
}

button[value^="ds/"].et-vb-module-picker-option--selected,
button[value="divi-sensei"].et-vb-module-picker-option--selected {
    background-color: hsl(from var(--ds-vb-module-selection-background-color) h s l / 0.9) !important;
    transition: all .2s ease;
}

/* ---- Divi 4 builder modal ---- */
/* Module tiles: li[class^="ds_"] (edd slugs) and li[class^="et_fb_ds_"] (ET-marketplace
   slugs et_pb_ds_* render with the et_pb_ -> et_fb_ class prefix swap).
   li.divi_sensei = the module folder tile (folder_name "divi_sensei"). */

.et-db #et-boc .et-fb-modules-list ul>li[class^="ds_"]:before,
.et-db #et-boc .et-fb-modules-list ul>li[class^="et_fb_ds_"]:before,
.et-db #et-boc .et-fb-modules-list ul>li.divi_sensei:before {
    color: var(--ds-vb-module-selection-icon-color);
}

.et-db #et-boc .et-fb-modules-list ul>li[class^="ds_"],
.et-db #et-boc .et-fb-modules-list ul>li[class^="et_fb_ds_"],
.et-db #et-boc .et-fb-modules-list ul>li.divi_sensei {
    background-color: var(--ds-vb-module-selection-background-color) !important;
    color: var(--ds-vb-module-selection-text-color) !important;
    overflow: visible !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.et-db #et-boc .et-fb-modules-list ul>li[class^="ds_"]:hover,
.et-db #et-boc .et-fb-modules-list ul>li[class^="et_fb_ds_"]:hover,
.et-db #et-boc .et-fb-modules-list ul>li.divi_sensei:hover {
    background-color: #1f2b33 !important;
}

.et-db #et-boc .et-fb-modules-list ul>li[class^="ds_"] span,
.et-db #et-boc .et-fb-modules-list ul>li[class^="et_fb_ds_"] span,
.et-db #et-boc .et-fb-modules-list ul>li.divi_sensei span {
    font-size: 10px !important;
}

.et-db #et-boc .et-fb-modules-list ul>li[class^="ds_"] .et-fb-icon.et-fb-icon--svg,
.et-db #et-boc .et-fb-modules-list ul>li[class^="et_fb_ds_"] .et-fb-icon.et-fb-icon--svg {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: -3px auto 5px auto !important;
}

/* Folder tile: replace the default folder font glyph with the Divi Sensei mascot
   (from ../assets/sensei-logo.svg; head circle at .6 opacity, features on top). */
.et-db #et-boc .et-fb-modules-list ul>li.divi_sensei:before {
    content: '' !important;
    width: 18px;
    height: 18px;
    margin: -3px auto 5px auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cg transform='scale(0.1956) translate(9.2 -8.6)'%3E%3Cpath d='M61,37.6c0,16-13,29-29,29s-29-13-29-29s13-29,29-29S61,21.6,61,37.6' opacity='.6'/%3E%3Cpath d='M28.9,23c0,0,1.3-5.9-3.9-6.3c-5.3-0.3-5.4,3-12.3,2.8C7.4,19.4,4,16.7,2,16.5c1.8,2.3,6.4,7.2,14.6,6.6c4.8-0.4,6.8-2.2,8.1-2.3C26.4,20.7,27.5,21.4,28.9,23'/%3E%3Cpath d='M35,23c0,0-1.3-5.9,3.9-6.3c5.3-0.3,5.4,3,12.3,2.8c5.3-0.2,8.7-2.9,10.8-3.1c-1.8,2.3-6.4,7.2-14.6,6.6c-4.8-0.4-6.8-2.2-8.1-2.3C37.6,20.7,36.5,21.4,35,23'/%3E%3Cpath d='M27.4,34.9c0,0-11.5-5.3-16.3,6.4c-6.4,15.5,2,39.7,3.3,40c1.2,0.3-4.8-26.5,1.2-38c2.1-4,6.5-5.1,11.8-5.3C31.4,37.6,27.4,34.9,27.4,34.9'/%3E%3Cpath d='M36.7,34.9c0,0,11.5-5.3,16.3,6.4c6.4,15.5-2,39.7-3.3,40c-1.2,0.3,4.8-26.5-1.2-38c-2.1-4-6.5-5.1-11.8-5.3C32.7,37.6,36.7,34.9,36.7,34.9'/%3E%3Cpath d='M37.8,52c-0.2-5.8-4.5-5.7-5.8-5.6c0,0,2.9,0,0,0c-1.2-0.1-5.6-0.2-5.8,5.6c-0.2,6.6,5,37.5,5.8,38c0,0,0-0.3,0-0.9c0,0.6,0,0.9,0,0.9C32.8,89.4,38,58.5,37.8,52'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}