:block(checkbox):mod(theme islands) {
    position: relative; /* fix #1538 */

    font-family: var(--checkbox-fontFamily);

    -webkit-tap-highlight-color: var(--color-typo-primary);

	color: var(--color-control-typo-primary);
	
    &:hover {
        cursor: pointer;
    }

    :block(checkbox):elem(control) {
        position: absolute;
        z-index: -1;

        margin: 0;

        opacity: 0;
    }

    :block(checkbox):elem(box) {
        position: relative;

        display: inline-block;

        border-radius: 3px;
        background: var(--color-control-border);

        &:before {
            position: absolute;
            top: var(--checkbox-before-space);
            right: var(--checkbox-before-space);
            bottom: var(--checkbox-before-space);
            left: var(--checkbox-before-space);

            content: '';

            border-radius: var(--checkbox-before-borderRadius);
            background: var(--color-control-default);
        }

        &:after {
            position: absolute;
            top: var(--checkbox-after-space);
            left: var(--checkbox-after-space);

            content: '';
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            background-repeat: no-repeat;
            background-position: 50% 50%;

           

            visibility: hidden;
            opacity: 0;

            transition: transform .05s ease-out, opacity .05s ease-out, visibility 0s linear .05s;
        }
    }

    &:block(checkbox):mod(size m) {
        font-size: var(--checkbox-size-m-fontSize);

        :block(checkbox):elem(box) {
            line-height: var(--checkbox-size-m-lineHeight);

            top: var(--checkbox-size-m-top);

            width: var(--checkbox-size-m-width);
            height: var(--checkbox-size-m-height);
            margin-right: var(--checkbox-size-m-marginRight);

            &:after {
                width: var(--checkbox-size-m-after-width);
                height: var(--checkbox-size-m-after-width);

                background-image: var(--checkbox-m-tip);

                transform: translateY(var(--checkbox-size-m-transformY));
            }
        }
    }

    &:block(checkbox):mod(size l) {
        font-size: var(--checkbox-size-l-fontSize);

        :block(checkbox):elem(box) {
            line-height: var(--checkbox-size-l-lineHeight);

            top: var(--checkbox-size-l-top);

            width: var(--checkbox-size-l-width);
            height: var(--checkbox-size-l-height);
            margin-right: var(--checkbox-size-l-marginRight);

            &:after {
                width: var(--checkbox-size-l-after-width);
                height: var(--checkbox-size-l-after-height);

                background-image: var(--checkbox-l-tip);

                transform: translateY(var(--checkbox-size-l-transformY));
            }
        }
    }

    &:block(checkbox):mod(checked) {
        :block(checkbox):elem(box) {
            background: var(--color-control-border-check);

            &:before {
                background: var(--color-control-check);
            }

            &:after {
                visibility: visible;
                opacity: 1;
                transform: translateY(0px);

                transition-delay: 0s;
            }
        }
    }

    &:block(checkbox):mod(focused) {
        :block(checkbox):elem(box):before {
            /* Цвет тени (бордера) чекнутого чекбокса кнопки по ховеру */  /*box-shadow: $checkbox-focused-boxShadow $project, inset $checkbox-focused-inset-boxShadow $project; */
        }
    }

    &:block(checkbox):mod(hovered) {
        :block(checkbox):elem(box) {
            background: var(--color-control-border-hover);
        }

        &:block(checkbox):mod(checked) :block(checkbox):elem(box) {
            background: var(--color-control-border-check-hover);
        }
    }

    &:block(checkbox):mod(disabled) {
        cursor: default;

        color: var(--color-control-typo-disable);

        :block(checkbox):elem(box) {
            background: var(--color-control-disable);

            &:before {
                display: none;
            }
        }

        &:block(checkbox):mod(checked) :block(checkbox):elem(box) {
            background: var(--color-control-disable-check);

            &:after {
                opacity: var(--checkbox-disabled-checked-opacity);
            }
        }
    }

    &:block(checkbox):mod(type button) {
        display: inline-block;
    }

    &:block(checkbox):mod(type line) {
        &:block(checkbox):mod(size m) {
            margin-right: var(--checkbox-line-size-m-marginRight);
        }

        &:block(checkbox):mod(size l) {
            margin-right: var(--checkbox-line-size-l-marginRight);
        }

        &:last-child
        {
            margin-right: var(--checkbox-line-last-child-marginRight);
        }
    }
}

/* hack for Safari only */
_::-webkit-full-page-media,
_:future,
:root :block(checkbox):mod(theme islands) :block(checkbox):elem(box) {
    pointer-events: none; /* NOTE: Fix #1472 and #1590 */
}