.checkbox-container {
    position: relative;
    z-index: 0;
    display: inline-block;

    &:global(.checked) {
        .icon {
            padding: calc(0.1 * var(--icon-size));
        }
    }

    .icon {
        width: var(--icon-size);
        height: var(--icon-size);
        fill: var(--icon-color);
        background-color: var(--icon-background-color);
    }

    .native-checkbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        opacity: 0;
        z-index: -1;
    }
}