:block(radio):mod(theme islands) {
    font-family: var(--radio-fontFamily);

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

    &:hover {
        cursor: pointer;
    }

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

        margin: 0;

        opacity: 0;
    }

    :block(radio):elem(box) {

		overflow: hidden; /* !!! */

        position: relative;

        display: inline-block;

        border-radius: var(--radio-borderRadius);
        background: var(--color-control-border);

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

            content: '';

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

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

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

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

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

            &:after {
                top: 50%;
                left: 50%;

                margin-top: calc( -1 * (0.5 * var(--radio-width-m-after)) );
                margin-left: calc( -1 * (0.5 * var(--radio-width-m-after)) );

                width: var(--radio-width-m-after);
                height: var(--radio-height-m-after);
            }
        }
    }

    &:block(radio):mod(size l) {
        font-size: var(--radio-size-l-fontSize);
        :block(radio):elem(box) {
            line-height: var(--radio-size-l-lineHeight);

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

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

            &:after {
                top: 50%;
                left: 50%;

                margin-top: calc( -1 * (0.5 * var(--radio-width-l-after)) );
                margin-left: calc( -1 * (0.5 * var(--radio-height-l-after)) );

                width: var(--radio-width-l-after);
                height: var(--radio-height-l-after);
            }
        }
    }

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

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

            &:after {
                position: absolute;

                border-radius: var(--radio-checked-after-borderRadius);
                background: var(--radio-dot-background);

                content: '';
            }
        }
    }

    &:block(radio):mod(focused) {
        :block(radio):elem(box):before {
            box-shadow: var(--radio-focused-boxShadow) var(--color-control-border-focus), inset var(--radio-focused-inset-boxShadow) var(--color-control-border-focus);
        }
    }

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

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

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

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

            :block(radio):mod(checked) {
                background: var(--color-control-disable-check);
            }

            &:before {
                display: none;
            }

            &:after {
                background: var(--color-control-typo-inverse-disable);
            }
        }
    }

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

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

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

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