@use '../abstracts' as *;

.presszone-comments-share-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: $presszone-comments-z-index-tooltip;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-lg;
    box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-shadow;
    min-width: $presszone-comments-dropdown-min-width;
    padding: $presszone-comments-spacing-zero;
    animation: presszone-comments-fade-in-up $presszone-comments-duration-normal $presszone-comments-ease-smooth;
    margin-top: $presszone-comments-spacing-xs;
    overflow: hidden;

    // FALLBACK BACKGROUNDS
    background-color: $presszone-comments-bg-primary;
    border-color: $presszone-comments-border;

    @include theme-props(('background-color': 'dropdown-bg',
            '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;
    }

    &__item {
        display: flex;
        align-items: center;
        gap: $presszone-comments-spacing-md;
        width: 100%;
        padding: $presszone-comments-spacing-md $presszone-comments-spacing-lg;
        background: none;
        border: none !important;
        outline: 0;
        font-size: $presszone-comments-font-size-sm;
        font-family: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: background-color $presszone-comments-duration-normal $presszone-comments-ease-smooth;
        text-align: start;
        box-sizing: border-box;

        @include theme-props(('color': 'dropdown-text' // Ensure high contrast on solid bg
            ));

        &:hover {
            @include theme-props(('background-color': 'bg-hover',
                    'color': 'accent'
                ));
            // Original used color: $presszone-comments-accent;
            color: $presszone-comments-accent;
        }

        // Accessible focus outline
        &:focus-visible {
            outline: 2px solid $presszone-comments-accent !important;
            outline-offset: 2px;
        }

        &--divider {
            border-top-width: $presszone-comments-border-width;
            border-top-style: solid;
            padding-top: $presszone-comments-spacing-md;

            @include theme-props(('border-top-color': 'border'
                ));
        }
    }

    &__icon {
        font-size: $presszone-comments-font-size-md;
        width: $presszone-comments-icon-size-md;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: $presszone-comments-icon-size-sm;
            height: $presszone-comments-icon-size-sm;
            fill: currentColor;
        }
    }

    &__label {
        flex: 1;
    }
}

@keyframes presszone-comments-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(-$presszone-comments-spacing-xs);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}