//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@use 'sass:map';
@use '../../../tokens';
@use '../../../themes';

@mixin styles() {
    $tokens: tokens.md-comp-rich-tooltip-values();

    @layer mdc-tooltip-component {
        & {
            // Only use the logical properties.
            $tokens: map.remove($tokens, 'container-shape');

            @each $token, $value in $tokens {
                --_#{$token}: #{$value};
            }
        }

        & {
            all: unset;
            display: none;
            box-sizing: border-box;
            position: relative;
            border-start-start-radius: var(--_container-shape-start-start);
            border-start-end-radius: var(--_container-shape-start-end);
            border-end-start-radius: var(--_container-shape-end-start);
            border-end-end-radius: var(--_container-shape-end-end);
            background: var(--_container-color);
            overflow-wrap: anywhere;
            height: fit-content;
            min-height: 24px;
            max-height: 40vh;
            width: fit-content;
            min-width: 40px;
            max-width: 280px;
            min-height: 24px;
            padding-top: 12px;
            padding-bottom: 8px;
            padding-left: 16px;
            padding-right: 16px;
            margin: 0;

            @include themes.md-comp-elevation-theme(
                (
                    'level': var(--_container-elevation),
                )
            );

            &[visible] {
                display: block;
            }
        }

        & .subhead {
            display: block;
            color: var(--_subhead-color);
            font: var(--_subhead-font);
            line-height: var(--_subhead-line-height);
            size: var(--_subhead-size);
            font-weight: var(--_subhead-weight);
            letter-spacing: var(--_subhead-tracking);
        }
        & .supporting-text {
            display: block;
            color: var(--_supporting-text-color);
            font: var(--_supporting-text-font);
            line-height: var(--_supporting-text-line-height);
            size: var(--_supporting-text-size);
            font-weight: var(--_supporting-text-weight);
            letter-spacing: var(--_supporting-text-tracking);
            margin-top: 4px;
        }

        & .actions {
            position: relative;
            display: flex;
            margin-top: 12px;

            & .action-label {
                all: unset;
                display: inline-flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                height: 40px;
                padding-left: 4px;
                padding-right: 4px;
                user-select: none;
                border-radius: 8px;
                color: var(--_action-label-text-color);
                font: var(--_action-label-text-font);
                line-height: var(--_action-label-text-line-height);
                size: var(--_action-label-text-size);
                font-weight: var(--_action-label-text-weight);
                letter-spacing: var(--_action-label-text-tracking);

                @include themes.md-comp-ripple-theme(
                    (
                        'hover-color': var(--_action-hover-state-layer-color),
                        'hover-opacity': var(--_action-hover-state-layer-opacity),
                        'pressed-color': var(--_action-pressed-state-layer-color),
                        'pressed-opacity': var(--_action-pressed-state-layer-opacity),
                    )
                );

                &:hover {
                    color: var(--_action-hover-label-text-color);
                }

                &:active,
                &:hover:active {
                    color: var(--_action-pressed-label-text-color);
                }

                &:focus-within {
                    color: var(--_action-focus-label-text-color);
                }
            }
        }
    }
}