.checkbox {
    position: relative;
    width: 1rem;
    height: 1rem;

    & input {
        position: absolute;
        opacity: 0;
        inset: 1;

        cursor: pointer;
    }

    & input:hover + label,
    & input:focus-within + label {
        background-image: url(../assets/icons/checkbox-hover.svg);
    }

    & input:checked + label {
        background-image: url(../assets/icons/checkbox-selected.svg);
    }

    & label {
        display: block;
        width: 100%;
        height: 100%;

        background: url(../assets/icons/checkbox-default.svg) no-repeat center/contain;
    }
}