@import "/UI/Style.scss";

Checkbox {
    pointer-events: auto;
    align-items: center;

    .checkbox {
        width: 48px;
        aspect-ratio: 1;
        background-image: url(ui/settings/checkbox_inactive.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;

        .check {
            width: 48px;
            aspect-ratio: 1;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }

    &.checked {
        .checkbox {
            .check {
                background-image: url(ui/settings/checkbox_active.png);
            }
        }
    }

    &.disabled {
        opacity: 0.5;
    }

    &:not(.disabled) {
        &:hover {
            cursor: pointer;
            sound-in: 'hover';

            label {
                transform: scale(1.01);
            }

            .checkbox {
                transform: scale(1.1);
            }
        }

        &:active {
            sound-in: 'light_click';

            label {
                transform: scale(0.99);
            }

            .checkbox {
                transform: scale(0.9);
            }
        }
    }
}