@use '../abstracts' as *;

/**
 * Inherit Theme
 * 
 * This theme inherits colors from the WordPress theme.
 * Uses pure SCSS with direct inherit/transparent values for seamless integration.
 */

.presszone-comments-theme--inherit {
    // Use system color scheme support
    color-scheme: light dark;

    // Apply inherit directly to wrapper
    color: inherit;
    font-family: inherit;
    background-color: transparent;

    // =============================================
    // OVERRIDE ALL COMPONENT SELECTORS WITH COLORS
    // This is required because CSS variables cannot 
    // cascade 'inherit' - must use direct properties
    // =============================================

    // All generic child elements
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    div,
    label,
    button,
    input,
    textarea {
        color: inherit;
        font-family: inherit;
    }

    // ---- Comment Item Component ----
    .presszone-comments-item__body {
        color: inherit !important;
    }

    .presszone-comments-item__author {
        color: inherit !important;
    }

    .presszone-comments-item__date {
        color: inherit !important;
        opacity: 0.7 !important;
    }

    .presszone-comments-item__number {
        color: inherit !important;
        opacity: 0.7 !important;

        &:hover {
            opacity: 1 !important;
        }
    }

    .presszone-comments-item__title {
        color: inherit !important;
    }

    // ---- Editor Component ----
    .presszone-comments-editor {
        background-color: transparent !important;
        border-color: currentColor !important;
    }

    .presszone-comments-editor-toolbar {
        border-bottom-color: currentColor !important;
    }

    .presszone-comments-tool-btn {
        color: inherit !important;

        &:hover {
            color: inherit !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    .presszone-comments-textarea {
        color: inherit !important;
        background-color: transparent !important;

        &::placeholder {
            color: inherit !important;
            opacity: 0.5 !important;
        }
    }

    // ---- Submit Button ----
    .presszone-comments-submit-btn {
        color: inherit !important;
        background-color: $presszone-comments-inherit-bg-strong !important;
        border: 1px solid currentColor !important;

        &:hover {
            background-color: $presszone-comments-inherit-bg-active !important;
        }
    }

    // ---- Cancel/Ghost Button ----
    .presszone-comments-cancel-btn,
    .presszone-comments-btn--ghost {
        color: inherit !important;
        background-color: transparent !important;
        border: 1px solid currentColor !important;

        &:hover {
            color: inherit !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    // ---- Action Buttons ----
    .presszone-comments-action {
        color: inherit !important;

        &:hover {
            color: inherit !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    .presszone-comments-vote-btn {
        color: inherit !important;

        &:hover {
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    .presszone-comments-vote-count {
        color: inherit !important;
    }

    // ---- Admin Actions ----
    .presszone-comments-admin-actions__trigger {
        color: inherit !important;
        border-color: $presszone-comments-inherit-border !important;

        &:hover {
            color: inherit !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    // Admin Actions Menu - MUST have solid background (floats over content)
    // Uses WordPress global style background with fallbacks
    // Admin Actions Menu - MUST have solid background (floats over content)
    // Uses WordPress global style background with fallbacks
    .presszone-comments-admin-actions__menu {
        background-color: $presszone-comments-inherit-dropdown-bg;
        color: $presszone-comments-inherit-dropdown-text;
        border-color: $presszone-comments-inherit-dropdown-border;
        box-shadow: $presszone-comments-inherit-dropdown-shadow;
    }

    .presszone-comments-admin-action {
        color: $presszone-comments-inherit-dropdown-text;

        &:hover {
            color: $presszone-comments-inherit-dropdown-text-hover;
            background-color: $presszone-comments-inherit-dropdown-hover-bg;
        }
    }

    // ---- Emoji Picker ----
    .presszone-comments-emoji-trigger {
        color: inherit;
    }

    // Emoji Popover - MUST have solid background (floats over content)
    .presszone-comments-emoji-popover {
        background-color: $presszone-comments-inherit-dropdown-bg;
        border-color: $presszone-comments-inherit-dropdown-border;
        color: $presszone-comments-inherit-dropdown-text;
        box-shadow: $presszone-comments-inherit-dropdown-shadow;
    }

    .presszone-comments-emoji-item {
        color: inherit;

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

    // ---- Pagination ----
    .presszone-comments-pagination {
        .page-numbers {
            color: inherit !important;
            background-color: transparent !important;
            border-color: $presszone-comments-inherit-border !important;

            &:hover {
                color: inherit !important;
                background-color: $presszone-comments-inherit-bg-subtle !important;
            }

            &.current {
                color: inherit !important;
                background-color: $presszone-comments-inherit-bg-strong !important;
            }
        }
    }

    // ---- Share Tooltip - MUST have solid background ----
    .presszone-comments-share-tooltip {
        background-color: $presszone-comments-inherit-dropdown-bg !important;
        border-color: $presszone-comments-inherit-dropdown-border !important;
        color: $presszone-comments-inherit-dropdown-text !important;
        box-shadow: $presszone-comments-inherit-dropdown-shadow !important;
    }

    .presszone-comments-share-tooltip__text {
        color: $presszone-comments-inherit-dropdown-text !important;
    }

    .presszone-comments-share-tooltip__link {
        color: inherit !important;
        background-color: $presszone-comments-inherit-bg-subtle !important;

        &:hover {
            background-color: $presszone-comments-inherit-bg-strong !important;
        }
    }

    .presszone-comments-share-tooltip__copy,
    .presszone-comments-share-tooltip__native {
        color: inherit !important;
        background-color: $presszone-comments-inherit-bg-strong !important;
        border-color: $presszone-comments-inherit-border !important;

        &:hover {
            background-color: $presszone-comments-inherit-bg-active !important;
        }
    }

    // ---- Share Dropdown - MUST have solid background ----
    .presszone-comments-share-dropdown {
        background-color: $presszone-comments-inherit-dropdown-bg !important;
        border-color: $presszone-comments-inherit-dropdown-border !important;
        color: $presszone-comments-inherit-dropdown-text !important;
        box-shadow: $presszone-comments-inherit-dropdown-shadow !important;
    }

    .presszone-comments-share-dropdown__item {
        color: $presszone-comments-inherit-dropdown-text !important;

        &:hover {
            color: $presszone-comments-inherit-dropdown-text-hover !important;
            background-color: $presszone-comments-inherit-dropdown-hover-bg !important;
        }
    }

    // ---- Toast - MUST have solid background ----
    .presszone-comments-toast {
        color: $presszone-comments-inherit-dropdown-text !important;
        background-color: $presszone-comments-inherit-dropdown-bg !important;
        border-color: $presszone-comments-inherit-dropdown-border !important;
        box-shadow: $presszone-comments-inherit-dropdown-shadow !important;
    }

    // ---- Modals ----
    // Modals MUST have solid light background with dark text for readability.
    // Since modals use a light background, we force dark text to prevent white-on-white
    // in dark WP themes where the inherited color would be white.
    .presszone-comments-modal,
    .presszone-comments-modal__content {
        background-color: $presszone-comments-inherit-dropdown-bg !important;
        color: $presszone-comments-inherit-dropdown-text !important;
        border-color: $presszone-comments-inherit-dropdown-border !important;
        box-shadow: $presszone-comments-inherit-dropdown-shadow !important;

        // Ensure ALL text inside modals is dark
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        span,
        label,
        div {
            color: $presszone-comments-inherit-dropdown-text !important;
        }

        // Slightly lighter for secondary text
        .presszone-comments-modal__description {
            color: $presszone-comments-text-secondary !important;
        }

        // Muted text
        .presszone-comments-modal__char-count {
            color: $presszone-comments-text-muted !important;
        }
    }

    .presszone-comments-modal__header {
        border-bottom-color: $presszone-comments-inherit-border !important;
    }

    .presszone-comments-modal__title {
        color: $presszone-comments-inherit-dropdown-text !important;
    }

    .presszone-comments-modal__footer {
        border-top-color: $presszone-comments-inherit-border !important;
    }

    // Modal form elements
    .presszone-comments-modal__textarea {
        color: $presszone-comments-inherit-dropdown-text !important;
        background-color: $presszone-comments-bg-primary !important;
        border-color: $presszone-comments-inherit-border !important;

        &::placeholder {
            color: $presszone-comments-text-muted !important;
        }
    }

    .presszone-comments-modal__quick-reason {
        color: $presszone-comments-text-secondary !important;
        background-color: $presszone-comments-bg-secondary !important;
        border-color: $presszone-comments-inherit-border !important;

        &:hover {
            color: $presszone-comments-inherit-dropdown-text !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }

        &--active {
            color: $presszone-comments-accent !important;
            background-color: $presszone-comments-inherit-bg-hover-accent !important;
        }
    }

    .presszone-comments-modal__cancel {
        color: $presszone-comments-text-secondary !important;
        background-color: $presszone-comments-bg-secondary !important;
        border-color: $presszone-comments-inherit-border !important;

        &:hover {
            color: $presszone-comments-inherit-dropdown-text !important;
            background-color: $presszone-comments-inherit-bg-subtle !important;
        }
    }

    // Form group inside modals
    .presszone-comments-form-group {
        label {
            color: $presszone-comments-inherit-dropdown-text !important;
        }

        select {
            color: $presszone-comments-inherit-dropdown-text !important;
            background-color: $presszone-comments-bg-primary !important;
            border-color: $presszone-comments-inherit-border !important;
        }
    }

    // ---- Replies Nesting ----
    .presszone-comments-replies {
        border-color: $presszone-comments-inherit-border !important;
    }

    // ---- Item Border ----
    .presszone-comments-item {
        border-color: $presszone-comments-inherit-bg-strong !important;
    }

    // ---- Notice ----
    .presszone-comments-notice {
        color: inherit !important;
    }

    // ---- Empty State ----
    .presszone-comments-empty {
        color: inherit !important;
    }

    // ---- Links (final override) ----
    a {
        color: inherit !important;

        &:hover {
            opacity: 0.8 !important;
        }
    }
}