@use '../core/styles/common/button';
@use '../core/styles/common/list';

@use '../core/styles/common/tokens' as *;

%kbq-button-base {
    @include button.kbq-button-reset();

    position: relative;

    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0; /* Safari */

    height: var(--kbq-button-size-height);
    min-height: var(--kbq-button-size-height);

    white-space: nowrap;

    text-decoration: none;
    text-align: center;

    vertical-align: baseline;

    border: var(--kbq-button-size-border-width) solid transparent;
    border-radius: var(--kbq-button-size-border-radius);

    &::-moz-focus-inner {
        border: 0;
    }

    &:focus {
        outline: none;
    }

    &.kbq-disabled {
        cursor: default;
    }

    &.cdk-focused {
        z-index: 1;
    }

    & .kbq-button-wrapper {
        display: flex;
        align-items: center;

        min-width: 0;
    }

    & .kbq-button-text {
        @include list.kbq-truncate-line();

        display: flex;
        align-items: center;

        min-width: 0;
    }

    & .kbq-icon_left {
        margin-right: var(--kbq-button-size-content-padding);
    }

    & .kbq-icon_right {
        margin-left: var(--kbq-button-size-content-padding);
    }

    & .kbq-button-prefix {
        margin-right: var(--kbq-button-size-content-padding);
    }

    & .kbq-button-suffix {
        margin-left: var(--kbq-button-size-content-padding);
    }
}