@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin tooltip($theme) {
    @include css-vars($theme, '.igx-tooltip');
    $variant: map.get($theme, '_meta', 'theme');

    $transparent-border: rem(4px) solid transparent;
    $color-border: rem(4px) solid var-get($theme, 'background');

    %tooltip-display {
        display: flex;
        align-items: flex-start;
        text-align: start;
        background: var-get($theme, 'background');
        color: var-get($theme, 'text-color');
        border-radius: var-get($theme, 'border-radius');
        box-shadow: var-get($theme, 'elevation');
        padding: pad-block(rem(4px)) pad-inline(rem(8px));
        gap: rem(8px);
        min-height: rem(24px);
        min-width: rem(24px);
        max-width: rem(200px);
        width: fit-content;

        igx-icon {
            --component-size: 1;
        }

        igx-tooltip-close-button {
            display: flex;
            cursor: default;
        }

        &:not([data-default]) {
            max-width: initial;
        }
    }

    %arrow--top {
        border-left: $transparent-border;
        border-right: $transparent-border;
        border-top: $color-border;
    }

    %arrow--bottom {
        border-left: $transparent-border;
        border-right: $transparent-border;
        border-bottom: $color-border;
    }

    %arrow--left {
        border-top: $transparent-border;
        border-bottom: $transparent-border;
        border-left: $color-border;
    }

    %arrow--right {
        border-top: $transparent-border;
        border-bottom: $transparent-border;
        border-right: $color-border;
    }

    %tooltip--hidden {
        display: none;
    }
}

/// Adds typography styles for the igx-tooltip component.
/// Uses custom typography.
/// @group typography
/// @param {Map} $categories [(tooltip-text: null] - The categories from the typographic scale used for type styles.
@mixin tooltip-typography(
    $categories: (tooltip-text: null)
) {
    $tooltip-text: map.get($categories, 'tooltip-text');

    @if $tooltip-text {
        %tooltip-display {
            @include type-style($tooltip-text);
        }
    } @else {
        %tooltip-display {
            line-height: rem(16px);
            font-size: rem(10px);
            font-weight: 600;
        }
    }
}