@use 'sass:map';
@use '../abstracts' as *;

.presszone-comments-emoji-picker {
    position: relative;
    display: inline-block;
}

.presszone-comments-emoji-trigger {
    background: none;
    border: none;
    font-size: $presszone-comments-icon-size;
    cursor: pointer;
    padding: $presszone-comments-spacing-sm;
    border-radius: $presszone-comments-radius-full;
    transition: background-color $presszone-comments-duration-normal;
    color: $presszone-comments-accent;

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

    @include dark-mode {
        &:hover {
            background-color: $presszone-comments-dark-bg-hover-accent;
        }
    }
}

.presszone-comments-emoji-popover {
    position: absolute;
    bottom: 100%;
    inset-inline-start: 0;
    margin-bottom: $presszone-comments-spacing-sm;
    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;
    z-index: 99999;
    width: 320px;
    max-width: calc(100vw - 16px); // Prevent overflow on mobile
    display: flex;
    flex-direction: column;
    overflow: hidden;

    // FALLBACK: Ensure solid background even without theme class
    background-color: $presszone-comments-bg-primary;
    border-color: $presszone-comments-border;

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

    &.presszone-comments-placement-bottom {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: $presszone-comments-spacing-sm;
    }
}

.presszone-comments-emoji-header {
    padding: $presszone-comments-spacing-sm;
    border-bottom-width: $presszone-comments-border-width;
    border-bottom-style: solid;

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

.presszone-comments-emoji-search {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md;
    border-width: 1px;
    border-style: solid;
    border-radius: $presszone-comments-radius-md;
    font-size: 13px;

    @include theme-props(('background-color': 'bg-secondary',
            'border-color': 'border',
            'color': 'text-primary'
        ));

    &:focus {
        outline: none;
    }

    &:focus-visible {
        border-color: $presszone-comments-primary;
        box-shadow: 0 0 0 2px rgba($presszone-comments-primary, 0.2);
    }
}

.presszone-comments-emoji-categories {
    display: flex;
    padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm;
    border-bottom-width: $presszone-comments-border-width;
    border-bottom-style: solid;
    gap: $presszone-comments-spacing-xs;

    @include theme-props(('background-color': 'bg-secondary',
            'border-bottom-color': 'border'
        ));
}

.presszone-comments-emoji-cat-btn {
    background: none;
    border: none;
    font-size: $presszone-comments-font-size-lg;
    padding: $presszone-comments-spacing-xs;
    cursor: pointer;
    border-radius: $presszone-comments-radius-sm;
    transition: background 0.2s;
    filter: grayscale(100%);
    opacity: 0.6;

    &:hover,
    &.active {
        filter: grayscale(0);
        opacity: 1;
        @include theme-props(('background-color': 'bg-hover'
            ));
    }
}

.presszone-comments-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: $presszone-comments-spacing-xs;
    padding: $presszone-comments-spacing-sm;
    max-height: $presszone-comments-spacing-giant + $presszone-comments-spacing-xxl; // 240px
    overflow-y: auto;

    // Scrollbar theming needs explicit vars or native fallback, map lookup tricky in pseudo-elements directly without duplication or mixin helpers.
    // For now, keeping static or simple vars if possible.
    // However, original code used SCSS vars directly.
    // theme-props works on parent selector &...
    // But scrollbars are ::-webkit-scrollbar.
    // We can nest theme-props inside?
    // theme-props iterates themes.
    // .presszone-comments-theme--light &::-webkit-scrollbar {}
    // This works!

    @include theme-props(('scrollbar-track-bg': 'bg-primary', // Wait, these are not standard CSS props.
        ));
    // theme-props expects CSS properties.
    // I can't use theme-props for selectors unless I modify mixin.
    // So I will write manual loops for scrollbars if needed, or leave them as is (but 'is' means variable dependency?).
    // 'bg-primary' var is used.
    // I should probably manually write the theme loops for scrollbars here since theme-props is property-focused.

    @each $theme, $map in $themes {
        .presszone-comments-theme--#{$theme} & {
            &::-webkit-scrollbar {
                width: $presszone-comments-spacing-sm;
            }

            &::-webkit-scrollbar-track {
                background-color: map.get($map, 'bg-primary');
            }

            &::-webkit-scrollbar-thumb {
                background-color: map.get($map, 'bg-hover');
                border-radius: $presszone-comments-radius-full;
            }
        }
    }
}

.presszone-comments-emoji-item {
    font-size: $presszone-comments-spacing-xl; // 24px
    cursor: pointer;
    text-align: center;
    padding: $presszone-comments-spacing-xs;
    border-radius: $presszone-comments-radius-sm;
    transition: transform 0.1s, background 0.1s;
    user-select: none;

    &:hover {
        transform: scale(1.2);
        @include theme-props(('background-color': 'bg-hover'
            ));
    }
}

.presszone-comments-emoji-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: $presszone-comments-spacing-lg;
    font-size: 13px;

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