@import "/UI/Core/Kit/Styles/UITokens.scss";

Hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;

    root {
        align-items: center;
        justify-content: center;
    }

    .hint-box {
        max-width: 320px;
        background-color: rgba( 8, 8, 8, 0.94 );
        backdrop-filter: $ui-backdrop;
        border-radius: $ui-radius-md;
        border: 1px solid $ui-color-border;
        box-shadow: $ui-shadow;
        padding: $ui-space-sm $ui-space-md;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-top: 180px;
        min-width: 120px;

        &.disabled {
            opacity: 0.68;
            border-color: rgba( 255, 255, 255, 0.08 );
        }
    }

    .hint-action {
        flex-direction: row;
        align-items: center;
        gap: $ui-space-sm;
        min-height: 32px;

        label {
            color: $ui-color-text;
        }

        InputHint {
            width: 32px;
            height: 32px;
            flex-shrink: 0;

            img {
                width: 32px;
                height: 32px;
            }
        }

        .hint-icon {
            font-family: $ui-font-family-icon;
            font-size: 17px;
            color: $ui-color-text-muted;
            min-width: 18px;
            text-align: center;
        }

        .hint-copy {
            flex-direction: column;
            align-items: flex-start;
            max-width: 260px;
            gap: 2px;
        }

        .hint-title {
            font-size: 14px;
        }

        .hint-sub {
            font-size: 13px;
            color: $ui-color-text-muted;
        }
    }
}