@import '../utils.less';

/**
 * @name Button
 * @selector [tuiButton], [tuiIconButton]
 *
 * @description
 * Plain button design, applicable to both links and buttons
 *
 * @attributes
 * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l')
 *
 * @example
 * <button tuiButton>Click me</button>
 *
 * @see-also
 * Icons, Appearance, Link
 */
[tuiButton]:where(*&),
[tuiIconButton]:where(*&) {
    --t-size: var(--tui-height-l);
    --t-radius: var(--tui-radius-l);
    --t-gap: 0.25rem;
    --t-padding: 0.5rem 1.25rem;
    --t-margin: -0.25rem;

    .button-base();

    // stylelint-disable-next-line -- graceful degradation
    min-block-size: fit-content;
    block-size: var(--t-size);
    justify-content: center;
    border-radius: var(--t-radius);
    padding: var(--t-padding);
    user-select: none;
    cursor: pointer;
    font: var(--tui-typography-body-m);
    font-weight: bold;

    > .t-loader {
        .center-all();

        .t-text {
            position: absolute;
        }
    }

    &[data-icon-start='font']::before,
    &[data-icon-end='font']::after {
        font-size: 1.5rem;
    }

    &[data-size='xs'] {
        --t-size: var(--tui-height-xs);
        --t-radius: var(--tui-radius-xs);
        --t-gap: 0.125rem;
        --t-padding: 0 0.375rem;
        --t-margin: -0.125rem;

        font: var(--tui-typography-body-s);

        tui-icon,
        &::before,
        &::after {
            font-size: 1rem;
        }
    }

    &[data-size='s'] {
        --t-size: var(--tui-height-s);
        --t-radius: var(--tui-radius-m);
        --t-gap: 0.125rem;
        --t-padding: 0.125rem 0.625rem;
        --t-margin: -0.125rem;

        font: var(--tui-typography-body-s);

        tui-icon,
        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::before,
        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::after {
            font-size: 1rem;
        }

        &[data-icon-start='font']::before,
        &[data-icon-end='font']::after {
            font-size: 1rem;
        }
    }

    &[data-size='m'] {
        --t-size: var(--tui-height-m);
        --t-radius: var(--tui-radius-m);
        --t-gap: 0.125rem;
        --t-padding: 0.375rem 1rem;
        --t-margin: -0.375rem;

        font: var(--tui-typography-body-m);
        font-weight: bold;

        &[data-icon-start='font']::before,
        &[data-icon-end='font']::after {
            font-size: 1.5rem;
        }
    }

    &._loading {
        --tui-disabled-opacity: 1;

        -webkit-text-fill-color: transparent;

        > *,
        &::before,
        &::after {
            opacity: 0;
        }

        > .t-loader {
            opacity: 1;
        }
    }

    &[tuiButtonVertical] {
        // StackBlitz changes "0rem" to "0" breaking calc
        --t-margin: ~'0rem' !important;

        flex-direction: column;
        flex-shrink: 1;
        block-size: auto;
        padding: 0.75rem;
        gap: 0.375rem;
        min-inline-size: 5rem;
        white-space: pre-line;
        font: var(--tui-typography-ui-s);

        & > * {
            max-block-size: calc(var(--t-line-height) * 2);
            line-height: inherit !important;

            --t-line-height: var(--tui-lh) !important;
        }
    }

    &:is(a):not([href]) {
        opacity: var(--tui-disabled-opacity);
        pointer-events: none;
    }
}

[tuiIconButton]:where(*&) {
    gap: 0;
    inline-size: var(--t-size);
    min-inline-size: var(--t-size);
    font-size: 0 !important;
    font-variant-ligatures: none !important;
    padding: 0;

    &&[data-icon-start]::after {
        display: none;
    }
}