@use '../abstracts' as *;

/**
 * Share Tooltip Component
 * Following BEM: .presszone-comments-share-tooltip
 */

.presszone-comments-share-tooltip {
    position: absolute;
    bottom: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    margin-bottom: $presszone-comments-spacing-md;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-lg;
    padding: $presszone-comments-spacing-md;
    box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-shadow;
    z-index: $presszone-comments-z-index-tooltip;
    display: flex;
    flex-direction: column;
    gap: $presszone-comments-spacing-sm;
    min-width: $presszone-comments-share-tooltip-min-width;

    // Jumping Entry Animation
    animation: presszone-comments-jump-in $presszone-comments-duration-normal $presszone-comments-ease-smooth;

    // FALLBACK BACKGROUNDS (for when tooltip renders outside theme wrapper)
    background-color: $presszone-comments-bg-primary;
    border-color: $presszone-comments-border;

    @include theme-props(('background-color': 'dropdown-bg', // Enforce solid background (same as modal/dropdown)
            'border-color': 'border'
        ));

    @include dark-mode {
        background-color: $presszone-comments-dark-bg-secondary;
        border-color: $presszone-comments-dark-border;
        box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-dark-shadow;
    }

    // Tooltip Arrow
    &::after {
        content: '';
        position: absolute;
        top: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        border: $presszone-comments-spacing-sm solid transparent;
        
        // FALLBACK for arrow (must match tooltip background)
        border-top-color: $presszone-comments-bg-primary;
        
        // Border top must match background
        @include theme-props(('border-top-color': 'dropdown-bg'
            ));
        
        @include dark-mode {
            border-top-color: $presszone-comments-dark-bg-secondary;
        }
    }

    &__text {
        text-align: center;
        font-size: $presszone-comments-font-size-sm;
        font-weight: 500;
        margin-bottom: $presszone-comments-spacing-sm;
        line-height: 1.4;

        @include theme-props(('color': 'text-primary'
            ));
    }

    &__links {
        display: flex;
        justify-content: center;
        gap: $presszone-comments-spacing-md;
        margin-bottom: $presszone-comments-spacing-xs;
    }

    &__link {
        text-decoration: none;
        font-weight: 600;
        font-size: $presszone-comments-font-size-xs;
        width: $presszone-comments-share-link-size;
        height: $presszone-comments-share-link-size;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $presszone-comments-radius-full;
        transition: all $presszone-comments-duration-normal $presszone-comments-ease-smooth;
        border-width: $presszone-comments-border-width;
        border-style: solid;
        border-color: transparent;

        @include theme-props(('background-color': 'bg-hover', // Default state background
                'color': 'text-primary'
            ));

        &:hover {
            background-color: $presszone-comments-accent; // static hover behavior?
            color: $presszone-comments-bg-primary;
            transform: translateY(-#{$presszone-comments-spacing-xxs});
            border-color: $presszone-comments-accent;

            @include dark-mode {
                color: $presszone-comments-dark-bg-primary;
            }
        }

        &:focus {
            outline: none;
        }

        &:focus-visible {
            box-shadow: 0 0 0 $presszone-comments-border-width-lg $presszone-comments-accent;
        }

        // Dark mode overrides were specific, but theme-props handles the base.
        // Hover state is static accent, so it's consistent.
    }

    &__copy {
        background-color: $presszone-comments-accent-dim;
        color: $presszone-comments-accent;
        border: $presszone-comments-border-width solid $presszone-comments-accent;
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md;
        border-radius: $presszone-comments-radius-sm;
        cursor: pointer;
        font-size: $presszone-comments-font-size-xs;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        transition: all $presszone-comments-duration-normal $presszone-comments-ease-smooth;
        width: 100%;

        &:hover {
            background-color: $presszone-comments-accent;
            color: $presszone-comments-bg-primary;

            @include dark-mode {
                color: $presszone-comments-dark-bg-primary;
            }
        }

        &:focus {
            outline: none;
        }

        &:focus-visible {
            box-shadow: 0 0 0 $presszone-comments-border-width-lg $presszone-comments-accent;
        }
    }

    &__native {
        background-color: $presszone-comments-accent;
        color: $presszone-comments-bg-primary;
        border: none;
        padding: $presszone-comments-spacing-md $presszone-comments-spacing-lg;
        border-radius: $presszone-comments-radius-sm;
        cursor: pointer;
        font-size: $presszone-comments-font-size-sm;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        transition: all $presszone-comments-duration-normal $presszone-comments-ease-smooth;
        width: 100%;

        @include dark-mode {
            color: $presszone-comments-dark-bg-primary;
        }

        &:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        &:focus {
            outline: none;
        }

        &:focus-visible {
            box-shadow: 0 0 0 $presszone-comments-border-width-lg $presszone-comments-bg-primary, 0 0 0 $presszone-comments-border-width-xl $presszone-comments-accent;
        }
    }
}

// Jumping Animation Keyframes
@keyframes presszone-comments-jump-in {
    0% {
        transform: translateX(-50%) translateY($presszone-comments-spacing-lg) scale(0.7);
        opacity: 0;
    }

    60% {
        transform: translateX(-50%) translateY(-#{$presszone-comments-spacing-xs + 1px}) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

// Accessibility: Reduced Motion Support
@media (prefers-reduced-motion: reduce) {
    .presszone-comments-share-tooltip {
        animation: none !important;
        transition: none !important;

        &__link:hover {
            transform: none !important;
        }

        &__native:hover {
            transform: none !important;
        }
    }
}

// Responsive Design: Mobile
@media (max-width: 768px) {
    .presszone-comments-share-tooltip {
        min-width: 160px;
        padding: $presszone-comments-spacing-sm;
        margin-bottom: $presszone-comments-spacing-sm;

        &__links {
            gap: $presszone-comments-spacing-sm;
        }

        &__link {
            width: 32px;
            height: 32px;
            font-size: 0.7rem;
        }

        &__copy,
        &__native {
            padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm;
            font-size: 0.7rem;
        }

        &__native {
            padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md;
        }
    }
}