@import '@hh.ru/design-tokens/build/less/variables';
@import '../../common/styles/colors';
@import '../../common/styles/color-utils';
@import '../../common/styles/_abstract-control';
@import '../../common/styles/button-base';
@import '../../common/styles/_abstract-icon';
@import '../../common/styles/_abstract-select';

@_prefix: ~'bloko-button';

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:local(.bloko-button) {
    /* stylelint-disable-next-line property-no-unknown */
    composes: bloko-button from '../controlGroup/controlGroup.less';
}

.bloko-button {
    .bloko-button(@_prefix);

    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-default-background-filled-default,
        @bloko-color-button-default-background-filled-hover,
        @bloko-color-button-default-background-filled-active,
        @bloko-color-button-default-background-filled-disabled,
        @bloko-color-button-default-typography-filled-default,
        @bloko-color-button-default-typography-filled-hover,
        @bloko-color-button-default-typography-filled-active,
        @bloko-color-button-default-typography-filled-disabled,
        @bloko-color-button-default-border-filled-default,
        @bloko-color-button-default-border-filled-hover,
        @bloko-color-button-default-border-filled-active,
        @bloko-color-button-default-border-filled-disabled,
        @bloko-color-button-default-icon-filled-default,
        @bloko-color-button-default-icon-filled-disabled,
        @bloko-color-button-default-icon-filled-hover,
        @bloko-color-button-default-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-default-background-outlined-default,
        @bloko-color-button-default-background-outlined-hover,
        @bloko-color-button-default-background-outlined-active,
        @bloko-color-button-default-background-outlined-disabled,
        @bloko-color-button-default-typography-outlined-default,
        @bloko-color-button-default-typography-outlined-hover,
        @bloko-color-button-default-typography-outlined-active,
        @bloko-color-button-default-typography-outlined-disabled,
        @bloko-color-button-default-border-outlined-default,
        @bloko-color-button-default-border-outlined-hover,
        @bloko-color-button-default-border-outlined-active,
        @bloko-color-button-default-border-outlined-disabled,
        @bloko-color-button-default-icon-outlined-default,
        @bloko-color-button-default-icon-outlined-disabled,
        @bloko-color-button-default-icon-outlined-hover,
        @bloko-color-button-default-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-default-background-flat-default,
        @bloko-color-button-default-background-flat-hover,
        @bloko-color-button-default-background-flat-active,
        @bloko-color-button-default-background-flat-disabled,
        @bloko-color-button-default-typography-flat-default,
        @bloko-color-button-default-typography-flat-hover,
        @bloko-color-button-default-typography-flat-active,
        @bloko-color-button-default-typography-flat-disabled,
        @bloko-color-button-default-border-flat-default,
        @bloko-color-button-default-border-flat-hover,
        @bloko-color-button-default-border-flat-active,
        @bloko-color-button-default-border-flat-disabled,
        @bloko-color-button-default-icon-flat-default,
        @bloko-color-button-default-icon-flat-disabled,
        @bloko-color-button-default-icon-flat-hover,
        @bloko-color-button-default-icon-flat-active
    );

    /* stylelint-disable selector-nested-pattern */
    &_invalid {
        border-color: @control-border-color-invalid;
    }

    &_invalid:hover {
        border-color: @control-border-color-invalid-hover;
    }
    /* stylelint-enable */
}

.bloko-button_kind-primary {
    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-primary-background-filled-default,
        @bloko-color-button-primary-background-filled-hover,
        @bloko-color-button-primary-background-filled-active,
        @bloko-color-button-primary-background-filled-disabled,
        @bloko-color-button-primary-typography-filled-default,
        @bloko-color-button-primary-typography-filled-hover,
        @bloko-color-button-primary-typography-filled-active,
        @bloko-color-button-primary-typography-filled-disabled,
        @bloko-color-button-primary-border-filled-default,
        @bloko-color-button-primary-border-filled-hover,
        @bloko-color-button-primary-border-filled-active,
        @bloko-color-button-primary-border-filled-disabled,
        @bloko-color-button-primary-icon-filled-default,
        @bloko-color-button-primary-icon-filled-disabled,
        @bloko-color-button-primary-icon-filled-hover,
        @bloko-color-button-primary-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-primary-background-outlined-default,
        @bloko-color-button-primary-background-outlined-hover,
        @bloko-color-button-primary-background-outlined-active,
        @bloko-color-button-primary-background-outlined-disabled,
        @bloko-color-button-primary-typography-outlined-default,
        @bloko-color-button-primary-typography-outlined-hover,
        @bloko-color-button-primary-typography-outlined-active,
        @bloko-color-button-primary-typography-outlined-disabled,
        @bloko-color-button-primary-border-outlined-default,
        @bloko-color-button-primary-border-outlined-hover,
        @bloko-color-button-primary-border-outlined-active,
        @bloko-color-button-primary-border-outlined-disabled,
        @bloko-color-button-primary-icon-outlined-default,
        @bloko-color-button-primary-icon-outlined-disabled,
        @bloko-color-button-primary-icon-outlined-hover,
        @bloko-color-button-primary-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-primary-background-flat-default,
        @bloko-color-button-primary-background-flat-hover,
        @bloko-color-button-primary-background-flat-active,
        @bloko-color-button-primary-background-flat-disabled,
        @bloko-color-button-primary-typography-flat-default,
        @bloko-color-button-primary-typography-flat-hover,
        @bloko-color-button-primary-typography-flat-active,
        @bloko-color-button-primary-typography-flat-disabled,
        @bloko-color-button-primary-border-flat-default,
        @bloko-color-button-primary-border-flat-hover,
        @bloko-color-button-primary-border-flat-active,
        @bloko-color-button-primary-border-flat-disabled,
        @bloko-color-button-primary-icon-flat-default,
        @bloko-color-button-primary-icon-flat-disabled,
        @bloko-color-button-primary-icon-flat-hover,
        @bloko-color-button-primary-icon-flat-active
    );
}

.bloko-button_kind-secondary {
    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-secondary-background-filled-default,
        @bloko-color-button-secondary-background-filled-hover,
        @bloko-color-button-secondary-background-filled-active,
        @bloko-color-button-secondary-background-filled-disabled,
        @bloko-color-button-secondary-typography-filled-default,
        @bloko-color-button-secondary-typography-filled-hover,
        @bloko-color-button-secondary-typography-filled-active,
        @bloko-color-button-secondary-typography-filled-disabled,
        @bloko-color-button-secondary-border-filled-default,
        @bloko-color-button-secondary-border-filled-hover,
        @bloko-color-button-secondary-border-filled-active,
        @bloko-color-button-secondary-border-filled-disabled,
        @bloko-color-button-secondary-icon-filled-default,
        @bloko-color-button-secondary-icon-filled-disabled,
        @bloko-color-button-secondary-icon-filled-hover,
        @bloko-color-button-secondary-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-secondary-background-outlined-default,
        @bloko-color-button-secondary-background-outlined-hover,
        @bloko-color-button-secondary-background-outlined-active,
        @bloko-color-button-secondary-background-outlined-disabled,
        @bloko-color-button-secondary-typography-outlined-default,
        @bloko-color-button-secondary-typography-outlined-hover,
        @bloko-color-button-secondary-typography-outlined-active,
        @bloko-color-button-secondary-typography-outlined-disabled,
        @bloko-color-button-secondary-border-outlined-default,
        @bloko-color-button-secondary-border-outlined-hover,
        @bloko-color-button-secondary-border-outlined-active,
        @bloko-color-button-secondary-border-outlined-disabled,
        @bloko-color-button-secondary-icon-outlined-default,
        @bloko-color-button-secondary-icon-outlined-disabled,
        @bloko-color-button-secondary-icon-outlined-hover,
        @bloko-color-button-secondary-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-secondary-background-flat-default,
        @bloko-color-button-secondary-background-flat-hover,
        @bloko-color-button-secondary-background-flat-active,
        @bloko-color-button-secondary-background-flat-disabled,
        @bloko-color-button-secondary-typography-flat-default,
        @bloko-color-button-secondary-typography-flat-hover,
        @bloko-color-button-secondary-typography-flat-active,
        @bloko-color-button-secondary-typography-flat-disabled,
        @bloko-color-button-secondary-border-flat-default,
        @bloko-color-button-secondary-border-flat-hover,
        @bloko-color-button-secondary-border-flat-active,
        @bloko-color-button-secondary-border-flat-disabled,
        @bloko-color-button-secondary-icon-flat-default,
        @bloko-color-button-secondary-icon-flat-disabled,
        @bloko-color-button-secondary-icon-flat-hover,
        @bloko-color-button-secondary-icon-flat-active
    );
}

.bloko-button_kind-warning {
    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-warning-background-filled-default,
        @bloko-color-button-warning-background-filled-hover,
        @bloko-color-button-warning-background-filled-active,
        @bloko-color-button-warning-background-filled-disabled,
        @bloko-color-button-warning-typography-filled-default,
        @bloko-color-button-warning-typography-filled-hover,
        @bloko-color-button-warning-typography-filled-active,
        @bloko-color-button-warning-typography-filled-disabled,
        @bloko-color-button-warning-border-filled-default,
        @bloko-color-button-warning-border-filled-hover,
        @bloko-color-button-warning-border-filled-active,
        @bloko-color-button-warning-border-filled-disabled,
        @bloko-color-button-warning-icon-filled-default,
        @bloko-color-button-warning-icon-filled-disabled,
        @bloko-color-button-warning-icon-filled-hover,
        @bloko-color-button-warning-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-warning-background-outlined-default,
        @bloko-color-button-warning-background-outlined-hover,
        @bloko-color-button-warning-background-outlined-active,
        @bloko-color-button-warning-background-outlined-disabled,
        @bloko-color-button-warning-typography-outlined-default,
        @bloko-color-button-warning-typography-outlined-hover,
        @bloko-color-button-warning-typography-outlined-active,
        @bloko-color-button-warning-typography-outlined-disabled,
        @bloko-color-button-warning-border-outlined-default,
        @bloko-color-button-warning-border-outlined-hover,
        @bloko-color-button-warning-border-outlined-active,
        @bloko-color-button-warning-border-outlined-disabled,
        @bloko-color-button-warning-icon-outlined-default,
        @bloko-color-button-warning-icon-outlined-disabled,
        @bloko-color-button-warning-icon-outlined-hover,
        @bloko-color-button-warning-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-warning-background-flat-default,
        @bloko-color-button-warning-background-flat-hover,
        @bloko-color-button-warning-background-flat-active,
        @bloko-color-button-warning-background-flat-disabled,
        @bloko-color-button-warning-typography-flat-default,
        @bloko-color-button-warning-typography-flat-hover,
        @bloko-color-button-warning-typography-flat-active,
        @bloko-color-button-warning-typography-flat-disabled,
        @bloko-color-button-warning-border-flat-default,
        @bloko-color-button-warning-border-flat-hover,
        @bloko-color-button-warning-border-flat-active,
        @bloko-color-button-warning-border-flat-disabled,
        @bloko-color-button-warning-icon-flat-default,
        @bloko-color-button-warning-icon-flat-disabled,
        @bloko-color-button-warning-icon-flat-hover,
        @bloko-color-button-warning-icon-flat-active
    );
}

.bloko-button_kind-success {
    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-success-background-filled-default,
        @bloko-color-button-success-background-filled-hover,
        @bloko-color-button-success-background-filled-active,
        @bloko-color-button-success-background-filled-disabled,
        @bloko-color-button-success-typography-filled-default,
        @bloko-color-button-success-typography-filled-hover,
        @bloko-color-button-success-typography-filled-active,
        @bloko-color-button-success-typography-filled-disabled,
        @bloko-color-button-success-border-filled-default,
        @bloko-color-button-success-border-filled-hover,
        @bloko-color-button-success-border-filled-active,
        @bloko-color-button-success-border-filled-disabled,
        @bloko-color-button-success-icon-filled-default,
        @bloko-color-button-success-icon-filled-disabled,
        @bloko-color-button-success-icon-filled-hover,
        @bloko-color-button-success-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-success-background-outlined-default,
        @bloko-color-button-success-background-outlined-hover,
        @bloko-color-button-success-background-outlined-active,
        @bloko-color-button-success-background-outlined-disabled,
        @bloko-color-button-success-typography-outlined-default,
        @bloko-color-button-success-typography-outlined-hover,
        @bloko-color-button-success-typography-outlined-active,
        @bloko-color-button-success-typography-outlined-disabled,
        @bloko-color-button-success-border-outlined-default,
        @bloko-color-button-success-border-outlined-hover,
        @bloko-color-button-success-border-outlined-active,
        @bloko-color-button-success-border-outlined-disabled,
        @bloko-color-button-success-icon-outlined-default,
        @bloko-color-button-success-icon-outlined-disabled,
        @bloko-color-button-success-icon-outlined-hover,
        @bloko-color-button-success-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-success-background-flat-default,
        @bloko-color-button-success-background-flat-hover,
        @bloko-color-button-success-background-flat-active,
        @bloko-color-button-success-background-flat-disabled,
        @bloko-color-button-success-typography-flat-default,
        @bloko-color-button-success-typography-flat-hover,
        @bloko-color-button-success-typography-flat-active,
        @bloko-color-button-success-typography-flat-disabled,
        @bloko-color-button-success-border-flat-default,
        @bloko-color-button-success-border-flat-hover,
        @bloko-color-button-success-border-flat-active,
        @bloko-color-button-success-border-flat-disabled,
        @bloko-color-button-success-icon-flat-default,
        @bloko-color-button-success-icon-flat-disabled,
        @bloko-color-button-success-icon-flat-hover,
        @bloko-color-button-success-icon-flat-active
    );
}

.bloko-button_kind-inversed {
    .bloko-button-colors(
        @_prefix,
        filled,
        @bloko-color-button-inversed-background-filled-default,
        @bloko-color-button-inversed-background-filled-hover,
        @bloko-color-button-inversed-background-filled-active,
        @bloko-color-button-inversed-background-filled-disabled,
        @bloko-color-button-inversed-typography-filled-default,
        @bloko-color-button-inversed-typography-filled-hover,
        @bloko-color-button-inversed-typography-filled-active,
        @bloko-color-button-inversed-typography-filled-disabled,
        @bloko-color-button-inversed-border-filled-default,
        @bloko-color-button-inversed-border-filled-hover,
        @bloko-color-button-inversed-border-filled-active,
        @bloko-color-button-inversed-border-filled-disabled,
        @bloko-color-button-inversed-icon-filled-default,
        @bloko-color-button-inversed-icon-filled-disabled,
        @bloko-color-button-inversed-icon-filled-hover,
        @bloko-color-button-inversed-icon-filled-active
    );

    .bloko-button-colors(
        @_prefix,
        outlined,
        @bloko-color-button-inversed-background-outlined-default,
        @bloko-color-button-inversed-background-outlined-hover,
        @bloko-color-button-inversed-background-outlined-active,
        @bloko-color-button-inversed-background-outlined-disabled,
        @bloko-color-button-inversed-typography-outlined-default,
        @bloko-color-button-inversed-typography-outlined-hover,
        @bloko-color-button-inversed-typography-outlined-active,
        @bloko-color-button-inversed-typography-outlined-disabled,
        @bloko-color-button-inversed-border-outlined-default,
        @bloko-color-button-inversed-border-outlined-hover,
        @bloko-color-button-inversed-border-outlined-active,
        @bloko-color-button-inversed-border-outlined-disabled,
        @bloko-color-button-inversed-icon-outlined-default,
        @bloko-color-button-inversed-icon-outlined-disabled,
        @bloko-color-button-inversed-icon-outlined-hover,
        @bloko-color-button-inversed-icon-outlined-active
    );

    .bloko-button-colors(
        @_prefix,
        flat,
        @bloko-color-button-inversed-background-flat-default,
        @bloko-color-button-inversed-background-flat-hover,
        @bloko-color-button-inversed-background-flat-active,
        @bloko-color-button-inversed-background-flat-disabled,
        @bloko-color-button-inversed-typography-flat-default,
        @bloko-color-button-inversed-typography-flat-hover,
        @bloko-color-button-inversed-typography-flat-active,
        @bloko-color-button-inversed-typography-flat-disabled,
        @bloko-color-button-inversed-border-flat-default,
        @bloko-color-button-inversed-border-flat-hover,
        @bloko-color-button-inversed-border-flat-active,
        @bloko-color-button-inversed-border-flat-disabled,
        @bloko-color-button-inversed-icon-flat-default,
        @bloko-color-button-inversed-icon-flat-disabled,
        @bloko-color-button-inversed-icon-flat-hover,
        @bloko-color-button-inversed-icon-flat-active
    );
}

.bloko-button__badge {
    margin-left: 8px;
}

.bloko-button_scale-small {
    .bloko-button-scale-small();
}

.bloko-button_scale-large {
    .bloko-button-scale-large();
}

.bloko-button_icon-only {
    .bloko-button-icon-only(@control-height-scale-medium);
}

.bloko-button_icon-only-small {
    .bloko-button-icon-only(@control-height-scale-small);
}

.bloko-button_icon-only-large {
    .bloko-button-icon-only(@control-height-scale-large);
}

.bloko-button_stretched {
    width: 100%;
    text-align: center;
}

.bloko-button_collapsible {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bloko-button__icon {
}

.bloko-button__icon_left {
    /* stylelint-disable-next-line unit-allowed-list */
    margin-right: 0.5em;
}

.bloko-button__icon_right {
    /* stylelint-disable-next-line unit-allowed-list */
    margin-left: 0.5em;
}

.bloko-button__loading {
    /* Браузер должен загрузить скрытую иконку */
    visibility: hidden;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* Наследуемая от родителей высота строки может быть больше высоты иконки,
           в этом случае иконка будет не по центру кнопки */
    line-height: 0;

    /* В Chrome, Opera, Firefox `transform: rotate` в некоторых случаях увеличивает
           `scrollHeight` родителя, вызывая скроллбар в блоках с `overflow: auto`.
            См. демо: http://output.jsbin.com/caniqup/2 */
    overflow: hidden;
}

.bloko-button_loading {
    .bloko-button__content {
        /* Кнопка не должна схлопываться в отсутствие текста */
        visibility: hidden;
    }

    .bloko-button__loading {
        visibility: visible;
    }
}

._rounded-left() {
    border-top-left-radius: @bloko-border-radius-button;
    border-bottom-left-radius: @bloko-border-radius-button;
}

._icon-in-group() {
    .bloko-icon-dynamic_full-width {
        display: inline-flex;
    }
}

// Группа кнопок
.bloko-button-group {
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: -@_button-group-vertical-space;
    margin-left: 1px;

    .bloko-button {
        margin-top: @_button-group-vertical-space;
        margin-left: -1px;
        border-radius: 0;

        &:first-child {
            ._rounded-left();
        }

        &:last-child {
            border-top-right-radius: @bloko-border-radius-button;
            border-bottom-right-radius: @bloko-border-radius-button;
        }
    }

    .bloko-button-check-helper:first-child + .bloko-button {
        ._rounded-left();
    }

    /*
    *   Что бы при наведении, нажатии и фокусе видимой становилась граница активной кнопки,
    *   а не той, что лежит раньше в HTML
    */
    .bloko-button:hover {
        z-index: 1;
    }

    .bloko-button:focus,
    .bloko-button:active,
    .bloko-button-check-helper:focus + .bloko-button {
        z-index: 2;
    }

    ._icon-in-group();

    .bloko-button_stretched {
        width: auto;
        flex-grow: 1;
    }
}

:global(.bloko-button-group) {
    ._icon-in-group();
}

.bloko-button-group_stretched {
    display: flex;
    flex-wrap: nowrap;
}

.bloko-button-check-helper {
    position: absolute;
    clip: rect(0 0 0 0);
}

.bloko-button-check-helper:checked + .bloko-button {
    box-shadow: @_button-active-box-shadow;
}

.bloko-button-check-helper:global(.focus-visible) + .bloko-button:not([disabled]):not(:active) {
    .abstract-control-focus-visible();
}

.bloko-button-check-helper:global(.focus-visible) + .bloko-button:active:not([disabled]),
.bloko-button-check-helper:checked:global(.focus-visible) + .bloko-button:not([disabled]) {
    box-shadow: @control-box-shadow-focus-visible, @_button-active-box-shadow;
}

.bloko-button-check-helper:focus + .bloko-button,
.bloko-button-check-helper:hover + .bloko-button {
    ._move-color-hsv-value(background-color, @control-background-color-complementary, -10);
    ._move-color-hsv-value(border-color, @control-border-color, -10);
}

._icon-disabled() {
    .bloko-icon {
        opacity: 0.5;
    }
}

.bloko-button-disabled() {
    box-shadow: none;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.bloko-button-check-helper:disabled + .bloko-button,
.bloko-button-check-helper + .bloko-button[disabled] {
    .bloko-button-disabled();
    ._icon-disabled();

    background-color: @control-background-color-complementary;
    border-color: @control-border-color;

    &:active,
    &:hover,
    &:focus {
        background-color: @control-background-color-complementary;
        border-color: @control-border-color;
    }
}

:global(.bloko-button-check-helper):disabled + :global(.bloko-button),
:global(.bloko-button-check-helper) + :global(.bloko-button)[disabled] {
    ._icon-disabled();
}

.bloko-button-select {
    .abstract-select();
}

.bloko-button-select_small {
    height: @control-height-scale-small;
}

.bloko-button-select_large {
    height: @control-height-scale-large;
}

.bloko-button-select_light {
    .select-light();

    [disabled] &,
    &[disabled] {
        .select-light-disabled();
    }
}