:block(button):mod(theme islands) {
    /* font-family: var(--button-fontFamily); */

    position: relative;

    display: inline-block;

    margin: 0;
    padding: 0;

    user-select: none;

    color: var(--color-control-typo-primary);
    border: 0;
    border-radius: var(--button-borderRadius);
    outline: 0;
    background: var(--color-control-default);

    text-align: center;
    white-space: nowrap;

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

    &::-moz-focus-inner {
        padding: 0;

        border: 0;
    }


    :block(button):elem(text) {
        position: relative;

        display: inline-block;
        overflow: hidden;

        text-overflow: ellipsis;
        vertical-align: top;
    }

    :block(icon) {
        position: relative;
        height: 100%;
    }

    &:block(button):mod(type link) {
        text-decoration: none;
    }

    /* Decorative element (inner background) */
    &:before {
        position: absolute;
        top: var(--button-before-space);
        right: var(--button-before-space);
        bottom: var(--button-before-space);
        left: var(--button-before-space);

        content: '';

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

    &:block(button):mod(hovered) {
        cursor: pointer;

        background: var(--color-hover);
    }

    &:block(button):mod(focused-hard) {
        z-index: 1;

        background: var(--color-border-focus);

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

    &:block(button):mod(pressed):before {
        background: var(--color-control-press);
    }

    &:block(button):mod(checked) {
        color: var(--color-control-typo-affect);

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

        &:block(button):mod(pressed) {
            background: var(--color-control-border-check-press);

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

        &:block(button):mod(hovered) {
            background: var(--color-control-hover);
        }
    }

    &:block(button):mod(view plain) {
        background: none;

        &:block(button):mod(pressed) {
            background: var(--color-control-press);
        }

        &:block(button):mod(checked) {
            background: var(--color-control-check);

            &:block(button):mod(pressed) {
                background: var(--color-control-check-press);
            }
        }

        &:block(button):mod(disabled) {
            background: none;
        }
    }

    &:block(button):mod(view action) {
        background: var(--color-control-action);
        color: var(--color-control-typo-affect);

        &:before {
            display: none;
        }

        &:block(button):mod(hovered) {
            background: var(--color-control-action-hover);
        }

        &:block(button):mod(pressed) {
            background: var(--color-control-action-press);
        }

        &:block(button):mod(focused-hard) {
            animation: button-action-focus 0.5s infinite linear alternate;

            box-shadow: none;
        }
    }

    &:block(button):mod(view pseudo) {
        overflow: hidden;

        background: none;

        &:before {
            background: none;
            box-shadow: var(--button-pseudo-before-boxShadow) var(--color-control-border);
        }

        &:block(button):mod(hovered):before {
            box-shadow: var(--button-pseudo-hovered-boxShadow) var(--color-control-border-hover);
        }

        &:block(button):mod(pressed):before {
            background: var(--color-control-border-press);
        }

        &:block(button):mod(checked) {
            &:before {
                background: var(--color-control-check);
                box-shadow: var(--button-checked-before-boxShadow) var(--color-control-border-check);
            }

            &:block(button):mod(hovered):before {
                box-shadow: var(--button-pseudo-hovered-boxShadow) var(--color-control-border-hover);
            }

            &:block(button):mod(pressed):before {
                background: var(--color-check);
                box-shadow: var(--button-pseudo-pressed-boxShadow) var(--color-control-border-press);
            }
        }
    }

    &:block(button):mod(disabled) {
        background: var(--color-control-disable);

        &:before {
            display: none;
        }

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

        :block(button):elem(text) {
			color: var(--color-control-typo-disable);
			opacity: 0.5;
        }

        :block(icon) {
            opacity: 0.3;
        }
    }

    &:block(button):mod(size s) {
        font-size: var(--button-size-s-font);
        line-height: var(--button-size-s-lineHeight);

        :block(icon) {
            width: var(--button-size-s-icon-width);
        }

        :block(button):elem(text) {
            margin: var(--button-size-s-text-margin);
        }
    }

    &:block(button):mod(size m) {
        font-size: var(--button-size-m-font);
        line-height: var(--button-size-m-lineHeight);

        :block(icon) {
            width: var(--button-size-m-icon-width);
        }

        :block(button):elem(text) {
            margin: var(--button-size-m-text-margin);
        }
    }

    &:block(button):mod(size l) {
        font-size: var(--button-size-l-font);
        line-height: var(--button-size-l-lineHeight);

        :block(icon) {
            width: var(--button-size-l-icon-width);
        }

        :block(button):elem(text) {
            margin: var(--button-size-l-text-margin);
        }
    }

    &:block(button):mod(size xl) {
        font-size: var(--button-size-xl-font);
        line-height: var(--button-size-xl-lineHeight);

        :block(icon) {
            width: var(--button-size-xl-icon-width);
        }

        :block(button):elem(text) {
            margin: var(--button-size-xl-text-margin);
        }
    }

    & :block(icon) + :block(button):elem(text) {
        margin-left: 0;
    }

    :block(button):elem(text):not(:last-child) {
        margin-right: 0;
    }
    

    &:block(button):mod(width available) {
        width: 100%;
    }
}

@keyframes button-action-focus {
    from {
        background-color: var(--color-control-action);
    }

    to {
        background-color: var(--color-control-action-focus);
    }
}

:block(control-group) {
    :block(button):mod(checked) + :block(button):mod(theme islands):before,
    :block(radio):mod(checked) + :block(radio) :block(button):mod(theme islands):before,
    :block(checkbox):mod(checked) + :block(checkbox) :block(button):mod(theme islands):before {
        left: 0;
    }

    :block(button):mod(theme islands) {
        border-radius: var(--control-group-borderRadius);

        &:before {
            right: 0;

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

            top: 2px ; /* вынести в переменную типа $control-group button-before-space */
            right: 2px;
            bottom: 2px;
            left: 2px;

        }

		
        &:block(button):mod(hovered) {
            cursor: pointer;

            background: var(--color-control-default);
        }


        &:block(button):mod(checked):before {
            right: 1px;
            background: var(--color-control-check);
        }

        &:block(button):mod(focused-hard):block(button):before {
            left: 0;
        }
    }

    > :block(button):mod(theme islands):first-child,
    > :first-child :block(button):mod(theme islands),
    > :first-child:block(popup) + :block(button):mod(theme islands) {
        border-radius: var(--control-group-first-child-borderRadius);

        &:before {
            border-radius: var(--control-group-first-child-before-borderRadius);
        }

        &:block(button):mod(focused-hard):block(button):before {
            left: 1px;
        }
    }

    > :block(button):mod(theme islands):last-child,
    > :last-child :block(button):mod(theme islands) {
        border-radius: var(--control-group-last-child-borderRadius);

        &:before {
            border-radius: var(--control-group-last-child-before-borderRadius);
            right: var(--control-group-last-child-before-border);
        }
    }

    > :only-child :block(button):mod(theme islands) {
        border-radius: var(--control-group-only-child-borderRadius);

        &:before {
            border-radius: var(--control-group-only-child-before-borderRadius);
        }
    }
}