@use 'abstracts' as *;
@use 'base/fonts';
@use 'base/accessibility';
@use 'components';
@use 'themes';

/**
 * Frontend Styles
 * 
 * Components use SCSS variables ($presszone-comments-*) throughout.
 * Theme classes and settings overrides use pure SCSS for runtime switching.
 */

// Main comments container - needs relative positioning for skip link
#presszone-comments {
    position: relative;
}

.presszone-comments-wrapper {
    max-width: $presszone-comments-max-width;
    width: 100%;
    margin: $presszone-comments-spacing-zero auto;
    font-family: $presszone-comments-font-main;
    border-radius: $presszone-comments-radius-lg;
    padding: $presszone-comments-spacing-lg;
    box-sizing: border-box;

    * {
        box-sizing: border-box;
    }

    // Theme Props for standard themes
    @include theme-props(('background-color': 'bg-primary',
            'color': 'text-primary'
        ));

    // Specific Inherit Theme Logic (Consolidated from frontend-inherit.scss)
    .presszone-comments-theme--inherit &,
    &.presszone-comments-theme--inherit {
        font-family: inherit;

        * {
            color: inherit;
            font-family: inherit;
        }

        // Ensure inputs inherit correctly in this mode
        input,
        textarea {
            color: inherit;
            // Border color handled by component theme-props but inherit mode might want 'currentColor' or specific
            // Let's rely on component theme-props first.
            // If component uses 'border' key, and inherit map has 'border' set to '$presszone-comments-inherit-border', it works.
        }

        // Links
        a {
            color: inherit;

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

.presszone-comments-title {
    font-size: $presszone-comments-font-size-xl;
    font-weight: 600;
    margin-bottom: $presszone-comments-spacing-lg;

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

.presszone-comments-list {
    margin-top: $presszone-comments-spacing-xl;
    height: auto;
    overflow: visible;
}

// Mobile Responsive Global Overrides
@media (max-width: $presszone-comments-breakpoint-md) {
    .presszone-comments-wrapper {
        padding: $presszone-comments-spacing-xs; // 4px default mobile
    }

    .presszone-comments-title {
        font-size: $presszone-comments-font-size-lg; // Slightly smaller title
        margin-bottom: $presszone-comments-spacing-md;
    }
}

/* ==========================================================================
   Settings Overrides (Class-Based Architecture)
   These use classes applied to wrapper/modal for padding/styling settings.
   Each option has explicit CSS rules using SCSS variables.
   ========================================================================== */

/* Padding Variations - Class Based */
.presszone-comments-padding--minimal {

    // Self
    &.presszone-comments-wrapper {
        padding: $presszone-comments-spacing-md !important;

        @media (max-width: $presszone-comments-breakpoint-md) {
            padding: $presszone-comments-spacing-xxs !important; // 2px on mobile for minimal
        }
    }

    .presszone-comments-title {
        margin-bottom: $presszone-comments-spacing-md !important;
    }

    .presszone-comments-item {
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md !important;

        @media (max-width: $presszone-comments-breakpoint-md) {
            padding: $presszone-comments-spacing-xxs !important; // 2px
        }
    }

    .presszone-comments-modal__header {
        padding: $presszone-comments-spacing-xxs $presszone-comments-spacing-md !important;
    }

    .presszone-comments-modal__actions {
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md !important;
    }

    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-modal__submit,
    .presszone-comments-modal__cancel,
    .presszone-comments-modal__quick-reason,
    .presszone-comments-modal__actions .presszone-comments-btn,
    .presszone-comments-btn {
        padding: $presszone-comments-btn-padding-sm !important;
    }

    .presszone-comments-action {
        padding: $presszone-comments-spacing-zero $presszone-comments-spacing-xs !important;
    }

    .presszone-comments-admin-action,
    .presszone-comments-admin-actions__trigger {
        padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm !important;
    }

    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-title-input,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings {
        padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm !important;
    }
}

// Standard padding is the default - but we add a class for mobile scaling
.presszone-comments-padding--standard {
    @media (max-width: $presszone-comments-breakpoint-md) {
        &.presszone-comments-wrapper {
            padding: $presszone-comments-spacing-sm !important; // 8px on mobile
        }

        .presszone-comments-item {
            padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm !important; // 4px top/bottom
        }

        .presszone-comments-submit-btn,
        .presszone-comments-cancel-btn,
        .presszone-comments-modal__cancel,
        .presszone-comments-btn,
        .presszone-comments-submit-btn {
            padding: $presszone-comments-spacing-sm !important;
        }

        .presszone-comments-modal__header,
        .presszone-comments-modal__actions {
            padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md !important;
        }
    }
}

.presszone-comments-padding--wide {

    // Self
    &.presszone-comments-wrapper {
        padding: $presszone-comments-spacing-xl !important;

        @media (max-width: $presszone-comments-breakpoint-md) {
            padding: $presszone-comments-spacing-md !important; // 12px on mobile
        }
    }

    .presszone-comments-title {
        margin-bottom: $presszone-comments-spacing-xl !important;
    }

    .presszone-comments-item {
        padding: $presszone-comments-spacing-lg $presszone-comments-spacing-xl !important;

        @media (max-width: $presszone-comments-breakpoint-md) {
            padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md !important; // 8px on mobile
        }
    }

    .presszone-comments-modal__header {
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-xl !important;
    }

    .presszone-comments-modal__actions {
        padding: $presszone-comments-spacing-md $presszone-comments-spacing-xl !important;
    }

    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-modal__submit,
    .presszone-comments-modal__cancel,
    .presszone-comments-modal__quick-reason,
    .presszone-comments-modal__actions .presszone-comments-btn,
    .presszone-comments-btn {
        padding: $presszone-comments-btn-padding-lg !important;
    }

    .presszone-comments-action {
        padding: $presszone-comments-spacing-sm $presszone-comments-spacing-md !important;
    }

    .presszone-comments-admin-action,
    .presszone-comments-admin-actions__trigger {
        padding: $presszone-comments-spacing-md $presszone-comments-spacing-lg !important;
    }

    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-title-input {
        padding: $presszone-comments-spacing-md $presszone-comments-spacing-lg !important;
    }
}

/* Styling (Border Radius) Variations - Class Based */
.presszone-comments-styling--square {

    // Self: wrapper has this class directly
    &.presszone-comments-wrapper {
        border-radius: 0 !important;
    }

    // Children
    .presszone-comments-modal,
    .presszone-comments-modal__header,
    .presszone-comments-modal__actions,
    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-modal__submit,
    .presszone-comments-modal__cancel,
    .presszone-comments-modal__quick-reason,
    .presszone-comments-modal__suggestion,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings,
    .presszone-comments-btn,
    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-toast,
    .presszone-comments-emoji-popover,
    .presszone-comments-pagination .page-numbers,
    .presszone-comments-share-tooltip,
    .presszone-comments-share-dropdown,
    .presszone-comments-notice,
    .presszone-comments-action,
    .presszone-comments-admin-action,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-title,
    .presszone-comments-title-input,
    .presszone-comments-vote-btn {
        border-radius: 0 !important;
    }
}

// Rounded is the default - no override needed

.presszone-comments-styling--pill {

    // Self: wrapper has this class directly
    &.presszone-comments-wrapper {
        border-radius: $presszone-comments-radius-xl !important;
    }

    // Children
    .presszone-comments-modal,
    .presszone-comments-modal__header,
    .presszone-comments-modal__actions,
    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-modal__submit,
    .presszone-comments-modal__cancel,
    .presszone-comments-modal__quick-reason,
    .presszone-comments-modal__suggestion,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings,
    .presszone-comments-btn,
    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-toast,
    .presszone-comments-emoji-popover,
    .presszone-comments-pagination .page-numbers,
    .presszone-comments-share-tooltip,
    .presszone-comments-share-dropdown,
    .presszone-comments-notice,
    .presszone-comments-action,
    .presszone-comments-admin-action,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-title,
    .presszone-comments-title-input,
    .presszone-comments-vote-btn {
        border-radius: $presszone-comments-radius-xl !important;
    }
}

/* Border Width Variations - Class Based */
.presszone-comments-border--standard {

    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-modal,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-emoji-popover,
    .presszone-comments-share-dropdown,
    .presszone-comments-share-tooltip,
    .presszone-comments-toast,
    .presszone-comments-btn,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-title-input,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings,
    .presszone-comments-modal__header,
    .presszone-comments-modal__footer,
    .presszone-comments-modal__actions,
    .presszone-comments-modal__quick-reason {
        border-width: $presszone-comments-border-width !important;
        border-style: solid !important;
    }
}

.presszone-comments-border--thick {

    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-modal,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-emoji-popover,
    .presszone-comments-share-dropdown,
    .presszone-comments-share-tooltip,
    .presszone-comments-toast,
    .presszone-comments-btn,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-title-input,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings,
    .presszone-comments-modal__header,
    .presszone-comments-modal__footer,
    .presszone-comments-modal__actions,
    .presszone-comments-modal__quick-reason {
        border-width: $presszone-comments-border-width-lg !important;
        border-style: solid !important;
    }
}

.presszone-comments-border--extra-thick {

    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-modal,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-emoji-popover,
    .presszone-comments-share-dropdown,
    .presszone-comments-share-tooltip,
    .presszone-comments-toast,
    .presszone-comments-btn,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-modal__textarea,
    .presszone-comments-textarea,
    .presszone-comments-editable,
    .presszone-comments-title-input,
    .presszone-comments-form-group select,
    .presszone-comments-select,
    .presszone-comments-select--settings,
    .presszone-comments-modal__header,
    .presszone-comments-modal__footer,
    .presszone-comments-modal__actions,
    .presszone-comments-modal__quick-reason {
        border-width: $presszone-comments-border-width-xl !important;
        border-style: solid !important;
    }
}

/* Borderless Variation */
.presszone-comments-styling--borderless {

    .presszone-comments-item,
    .presszone-comments-editor,
    .presszone-comments-modal,
    .presszone-comments-admin-actions__trigger,
    .presszone-comments-admin-actions__menu,
    .presszone-comments-emoji-popover,
    .presszone-comments-share-dropdown,
    .presszone-comments-share-tooltip,
    .presszone-comments-toast,
    .presszone-comments-btn,
    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn,
    .presszone-comments-tool-btn,
    .presszone-comments-action,
    .presszone-comments-vote-btn,
    .presszone-comments-select,
    .presszone-comments-select--settings {
        border: none !important;
        box-shadow: none !important;
    }

    .presszone-comments-editor-toolbar,
    .presszone-comments-modal__header,
    .presszone-comments-modal__footer,
    .presszone-comments-emoji-header,
    .presszone-comments-emoji-categories {
        border-bottom: none !important;
        border-top: none !important;
    }

    // Inputs might still need bottom border or background to be visible
    .presszone-comments-textarea,
    .presszone-comments-title-input {
        border: none !important;
        border-bottom-width: 1px !important;
        border-bottom-style: solid !important;
        border-radius: 0 !important;
        background: transparent !important;

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