// #############################################################################
// BUTTON GROUPS

.aligned .frontend-button-group label {
    min-width: unset;
}

.frontend-button-group {
    display: inline-flex;
    margin-inline-end: 1em;
    .btn {
        box-sizing: border-box;
        cursor: pointer;
        margin: 2px;
        padding: 0.375rem 0.75rem;
        border-radius: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        border-color: var(--bs-secondary);
        box-shadow: none;
        transition: all 0.15s ease-in-out;

        &:hover {
            filter: opacity(0.8);
        }

        &:focus,
        &.focus {
            filter: opacity(0.85);
            text-decoration: none;
        }
    }

    // adds basic active effect
    .btn.active {
        outline: 3px solid $color-primary;
        border-color: #fff !important;
    }

    // specific for default classes (used for button-group)
    .btn-default.active {
        border-radius: 0;
        background-color: $color-secondary !important;
    }
}

form .form-row>div:not([class])>.flex-container>label+div.frontend-button-group {
    // djangocms-adim-style hack with high specificity
    max-width: unset;
    width: unset;
}


.frontend-button-group-context-size,
.frontend-button-group-context-colors {
    > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-height: 75px;
    }
}

.frontend-button-group-context-colors {
    .btn {
        flex-basis: calc(25% - 4px);

        // min size of the modal is about 785px
        @media (min-width: 820px) {
            flex-basis: calc(20% - 4px);
        }
    }
}

// when using icons remove padding and improve sizing
// add icons in css to prevent CORS bug - see issue #38
.frontend-button-group-icons,
.frontend-grid-icons {
    .icon {
        font-size: 24px;
    }

    // custom icon sizes
    .icon-flex-align-start,
    .icon-flex-align-center,
    .icon-flex-align-end {
        transform: scale(1.4);
    }

    .icon-flex-content-around,
    .icon-flex-content-between {
        transform: scale(1.6);
    }

    .icon-flex-self-start,
    .icon-flex-self-center,
    .icon-flex-self-end {
        transform: scale(1.4);
    }

    .icon-align-reset,
    .icon-no-selection {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);" viewBox="0 0 32 32"><path d="M16 2.667c-7.36 0-13.333 5.973-13.333 13.333s5.973 13.333 13.333 13.333 13.333-5.973 13.333-13.333-5.973-13.333-13.333-13.333zM5.333 16c0-5.893 4.773-10.667 10.667-10.667 2.467 0 4.733 0.84 6.533 2.253l-14.947 14.947c-1.413-1.8-2.253-4.067-2.253-6.533zM16 26.667c-2.467 0-4.733-0.84-6.533-2.253l14.947-14.947c1.413 1.8 2.253 4.067 2.253 6.533 0 5.893-4.773 10.667-10.667 10.667z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-flex-align-start,
    .icon-align-items-start {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 1008 1024"><path d="M287.995 530h432.006v144.002h-432.006zM287.995 349.998h432.006v144.002h-432.006z"></path><path opacity="0.5" d="M-0.009 349.998v36.001h1008.013v-36.001h-1008.013zM251.994 349.998h504.006v36.001h-504.006v-36.001z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-align-center,
    .icon-align-items-center {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 1024 1024"><path d="M292.572 530.286h438.858v146.286h-438.858zM292.572 347.428h438.858v146.286h-438.858z"></path><path opacity="0.5" d="M0 493.714v36.571h1024v-36.571h-1024zM256 493.714h512v36.571h-512v-36.571z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-align-end,
    .icon-align-items-end {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 1024 1024"><path d="M292.572 530.286h438.858v146.286h-438.858zM292.572 347.429h438.858v146.286h-438.858z"></path><path opacity="0.5" d="M0 640v36.571h1024v-36.571h-1024zM256640h512v36.571h-512v-36.571z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-content-start,
    .icon-justify-content-start,
    .icon-start {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 32 32"><path opacity="0.5" d="M8 0h1.778v32h-1.778v-32zM8 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M16.889 8.889h7.111v14.222h-7.111zM8 8.889h7.111v14.222h-7.111z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-flex-content-center,
    .icon-justify-content-center,
    .icon-center {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 34 32"><path opacity="0.5" d="M16.002 0h1.778v32h-1.778v-32zM16.002 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M17.78 8.889h7.111v14.222h-7.111zM8.891 8.889h7.111v14.222h-7.111z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-flex-content-end,
    .icon-justify-content-end,
    .icon-end {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 32 32"><path opacity="0.5" d="M22.222 0h1.778v32h-1.778v-32zM22.222 7.111v17.778h1.778v-17.778h-1.778z"></path><path d="M16.889 8.889h7.111v14.222h-7.111zM8 8.889h7.111v14.222h-7.111z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-flex-content-around,
    .icon-justify-content-around {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 48 32"><path opacity="0.5" d="M23.143 0.571h1.714v30.857h-1.714zM0 0.571h1.714v30.857h-1.714zM46.286 0.571h1.714v30.857h-1.714z"></path><path d="M32.571 9.143h6.857v13.714h-6.857zM8.571 9.143h6.857v13.714h-6.857z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.6);
    }

    .icon-flex-content-between,
    .icon-justify-content-between {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 48 32"><path opacity="0.5" d="M0 0.571h1.714v30.857h-1.714v-30.857zM0 7.429v17.143h1.714v-17.143h-1.714zM46.286 0.571h1.714v30.857h-1.714v-30.857zM46.286 7.429v17.143h1.714v-17.143h-1.714z"></path><path d="M41.143 9.143h6.857v13.714h-6.857zM0 9.143h6.857v13.714h-6.857z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.6);
    }

    .icon-nav-fill {
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);; fill: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 32"><path opacity="0.5" d="M27.143,0.571 h1.714 v30.857 h-1.714 M0,0.571 h1.714 v30.857 h-1.714 M46.286,0.571 h1.714 v30.857 h-1.714 "></path><rect x="5.493182px" height="4.316076px" y="13.940055px" stroke-width="3px" width="18.441422px" transform=""></rect><rect x="32.697548px" height="4.316076px" y="14.00545px" stroke-width="3px" width="10.201631px" transform=""></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-nav-justified {
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);; fill: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 32"><path opacity="0.5" d="M23.143 0.571h1.714v30.857h-1.714zM0 0.571h1.714v30.857h-1.714zM46.286 0.571h1.714v30.857h-1.714z"></path><rect x="5.493182px" height="4.316076px" y="13.940055px" id="rect1" stroke-width="3px" width="13.863762px" transform=""></rect><rect x="29.035416px" height="4.316076px" y="14.00545px" stroke-width="3px" width="13.863762px" transform=""></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-column {
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 48 32"><path opacity="0.5" d="M35.698856,0.701791 h1.714 v30.857 h-1.714 M12.555861,0.701791 h1.714 v30.857 h-1.714 "></path><rect x="17.002724px" height="6.081749px" y="3.542232px" stroke-width="none" width="15.956408px" transform=""></rect><rect x="17.002724px" height="6.081749px" y="12.959123px" stroke-width="none" width="15.956408px" transform=""></rect><rect x="17.002724px" height="6.081749px" y="22.572197px" stroke-width="none" width="15.956408px" transform=""></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-self-start,
    .icon-align-self-start {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 32 32"><path opacity="0.5" d="M0 9.143v1.143h32v-1.143h-32zM9.143 9.143h12.571v1.143h-12.571v-1.143z"></path><path d="M16 9.143h4.571v9.143h-4.571zM10.286 9.143h4.571v13.714h-4.571z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-self-center,
    .icon-align-self-center {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 32 32"><path opacity="0.5" d="M0 15.429v1.143h32v-1.143h-32zM9.143 15.429h12.571v1.143h-12.571v-1.143z"></path><path d="M16 10.857h4.571v10.286h-4.571zM10.286 8.571h4.571v14.857h-4.571z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-flex-self-end,
    .icon-align-self-end {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 32 32"><path opacity="0.5" d="M0 21.714v1.143h32v-1.143h-32zM9.143 21.714h12.571v1.143h-12.571v-1.143z"></path><path d="M16 13.714h4.571v9.143h-4.571zM10.286 9.143h4.571v13.714h-4.571z"></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
        transform: scale(1.4);
    }

    .icon-size-xs,
    .icon-size-sm,
    .icon-xs,
    .icon-sm {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-size-sm,
    .icon-sm {
        transform: rotate(-90deg);
    }

    .icon-size-md,
    .icon-md {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 448 512"><path d="M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z"/></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-size-lg,
    .icon-lg {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 640 512"><path d="M512 64v256H128V64h384m16-64H112C85.5 0 64 21.5 64 48v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm100 416H389.5c-3 0-5.5 2.1-5.9 5.1C381.2 436.3 368 448 352 448h-64c-16 0-29.2-11.7-31.6-26.9-.5-2.9-3-5.1-5.9-5.1H12c-6.6 0-12 5.4-12 12v36c0 26.5 21.5 48 48 48h544c26.5 0 48-21.5 48-48v-36c0-6.6-5.4-12-12-12z"/></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-size-xl,
    .icon-xl {
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);;" viewBox="0 0 576 512"><path d="M528,0 H96 C72.15,0 52.800,19.35 52.800,43.2 v288 c0,23.85 19.35,43.2 43.2,43.2 h172.8 l-14.4,44 h-64.8 c-11.97,0 -21.6,9.63 -21.6,21.6 s9.63,21.6 21.6,21.6 h244.8 c11.97,0 21.6,-9.63 21.6,-21.6 s-9.63,-21.6 -21.6,-21.6 h-64.8 l-14.4,-43.2 h172.8 c23.84,0 43.1,-19.35 43.1,-43.2 V43.1 c0,-23.84 -19.35,-43.2 -43.2,-43.2 m-14.4,316.8 H110.4 V57.6 h403.2 v259.2 "></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-size-xxl,
    .icon-xxl {
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(15,15,15);" viewBox="0 0 576 412"><path d="M528,0 H48 C21.5,0 0,21.5 0,48 v216.136932 c0,26.5 21.5,48 48,48 h192 l-16,48 h-72 c-13.3,0 -24,10.7 -24,24 s10.7,24 24,24 h272 c13.3,0 24,-10.7 24,-24 s-10.7,-24 -24,-24 h-72 l-16,-48 h192 c26.5,0 48,-21.5 48,-48 V48 c0,-26.5 -21.5,-48 -48,-48 m-16,252 H60.792175 V64 h448 v193.877747 "></path></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 16)));
    }

    .icon-mb {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="43px" stroke-width="none" width="32px" height="4px" x="8px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-me {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="8px" stroke-width="none" width="4px" height="32px" x="43px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-ms {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="8px" stroke-width="none" width="4px" height="32px" x="1px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-mt {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="1px" stroke-width="none" width="32px" height="4px" x="8px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-mx {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="8px" stroke-width="none" width="4px" height="32px" x="1px"></rect><rect y="8px" stroke-width="none" width="4px" height="32px" x="43px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-my {
        transform: scale(1.3);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="43px" stroke-width="none" width="32px" height="4px" x="8px"></rect><rect y="1px" stroke-width="none" width="32px" height="4px" x="8px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-pb {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="31px" stroke-width="none" width="26px" height="4px" x="11px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-pe {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="30px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-ps {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="14px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-pt {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="13px" stroke-width="none" width="26px" height="4px" x="11px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-px {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="14px"></rect><rect y="11px" stroke-width="none" width="4px" height="26px" x="30px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }

    .icon-py {
        transform: scale(1.5);
        background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(15,15,15);;zoom: 1;" viewBox="0 0 48 48"><rect x="9px" height="30px" stroke-width="3px" y="9px" width="30px" fill="transparent" opacity="0.5" transform=""></rect><rect y="31px" stroke-width="none" width="26px" height="4px" x="11px"></rect><rect y="13px" stroke-width="none" width="26px" height="4px" x="11px"></rect></svg>');
        filter: brightness(calc(var(--dca-light-mode, 1) + calc(var(--dca-dark-mode, 0) * 100)));
    }
}

.icon-info {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 448" style="fill: DeepSkyBlue;"><path d="M256 344v-40c0-4.5-3.5-8-8-8h-24v-128c0-4.5-3.5-8-8-8h-80c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h24v80h-24c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h112c4.5 0 8-3.5 8-8zM224 120v-40c0-4.5-3.5-8-8-8h-48c-4.5 0-8 3.5-8 8v40c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8zM384 224c0 106-86 192-192 192s-192-86-192-192 86-192 192-192 192 86 192 192z"></path></svg>');
}
