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

/// @access private
/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin tooltip($theme) {
    @include tokens($theme, $mode: 'scoped', $scope: '.igx-tooltip');

    @include layer(base) {
        $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;
        }
    }
}