/* custom color classes */
.toolbox-button
    .white
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: white !important;
}

div.white svg text {
    fill: white !important;
}

.toolbox-button
    .gold
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: gold !important;
}

div.gold svg text {
    fill: gold !important;
}

.toolbox-button
    .silver
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: silver !important;
}

div.silver svg text {
    fill: silver !important;
}

.toolbox-button
    .cyan
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: cyan !important;
}

div.cyan svg text {
    fill: cyan !important;
}

.toolbox-button
    .lime
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: lime !important;
}

div.lime svg text {
    fill: lime !important;
}

.toolbox-button
    .magenta
    svg
    path:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    fill: magenta !important;
}

div.magenta svg text {
    fill: magenta !important;
}

/* custom size classes */
.toolbox-button
    .size-small
    svg:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    width: 36px !important;
    height: 36px !important;
}

.toolbox-button
    .size-medium
    svg:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    width: 48px !important;
    height: 48px !important;
}

.toolbox-button
    .size-large
    svg:not(
        .settings-button-small-icon svg,
        #participant-connection-indicator svg,
        #mic-disabled,
        #toggleFilmstripButton svg
    ) {
    width: 60px !important;
    height: 60px !important;
}