@use '../abstracts' as *;

.presszone-comments-editor {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-lg;
    padding: $presszone-comments-spacing-md;
    margin-bottom: $presszone-comments-spacing-xl;
    position: relative;

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

    // Clearfix to contain floated submit button without clipping popovers
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

.presszone-comments-editor-toolbar {
    display: flex;
    gap: $presszone-comments-spacing-sm;
    margin-bottom: $presszone-comments-spacing-sm;
    border-bottom-width: $presszone-comments-border-width;
    border-bottom-style: solid;
    padding-bottom: $presszone-comments-spacing-sm;

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

.presszone-comments-tool-btn {
    background: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
    padding: $presszone-comments-spacing-xs $presszone-comments-spacing-sm;
    border-radius: $presszone-comments-radius-lg;
    transition: all $presszone-comments-duration-normal;

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

    &:hover {
        @include theme-props(('background-color': 'bg-hover',
                'color': 'text-primary'
            ));
    }
}

.presszone-comments-textarea,
.presszone-comments-editable {
    width: 100%;
    min-height: $presszone-comments-editor-min-height;
    background: transparent;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-color: transparent;
    font-size: $presszone-comments-font-size-base;
    resize: vertical;
    padding: $presszone-comments-spacing-xs;

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid $presszone-comments-accent;
        outline-offset: -2px;
    }
    box-sizing: border-box;

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

    &[contenteditable="true"] {
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-y: auto;

        &.presszone-comments-is-empty::before {
            content: attr(data-placeholder);
            pointer-events: none;
            display: block;
            @include theme-props(('color': 'text-muted'
                ));
        }

        b,
        strong {
            font-weight: 700;
        }
    }
}

// Editor Toolbar Utility Classes
.presszone-comments-is-bold {
    font-weight: bold;
}

.presszone-comments-is-italic {
    font-style: italic;
}

.presszone-comments-is-underlined {
    text-decoration: underline;
}

// Editor Actions Container
.presszone-comments-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: $presszone-comments-spacing-sm;
    margin-top: $presszone-comments-spacing-sm;
}

// Tool Button Icon (for SVG/img icons in toolbar)
.presszone-comments-tool-icon {
    vertical-align: middle;
}

.presszone-comments-submit-btn {
    @extend %presszone-comments-btn-base;
    background-color: $presszone-comments-accent;
    color: $presszone-comments-bg-primary;
    border: none;
    margin-top: $presszone-comments-spacing-sm;
    float: inline-end;

    &:hover:not(:disabled) {
        opacity: 0.9;
    }

    &:disabled,
    &.presszone-comments-btn--loading {
        opacity: 0.7;
        cursor: not-allowed;
    }

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

.presszone-comments-cancel-btn {
    @extend %presszone-comments-btn-base;
    background-color: transparent;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    margin-top: $presszone-comments-spacing-sm;

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

    &:hover:not(:disabled) {
        @include theme-props(('background-color': 'bg-hover',
                'color': 'text-primary'
            ));
    }
}

.presszone-comments-title-input {
    width: 100%;
    padding: $presszone-comments-spacing-md;
    border-width: $presszone-comments-border-width;
    border-style: solid;
    border-radius: $presszone-comments-radius-sm;
    font-size: $presszone-comments-font-size-md;
    font-family: inherit;
    margin-bottom: $presszone-comments-spacing-sm;
    transition: border-color $presszone-comments-duration-normal;

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

    &:focus {
        outline: none;
    }

    &:focus-visible {
        border-color: $presszone-comments-accent;
        box-shadow: 0 0 0 2px $presszone-comments-bg-hover-accent;
    }

    &::placeholder {
        @include theme-props(('color': 'text-muted'));
        // Ensure minimum 4.5:1 contrast ratio (WCAG AA)
        opacity: 0.8;
    }
    
    // For inherit mode, provide explicit fallback colors with sufficient contrast
    .presszone-comments-theme--inherit & {
        &::placeholder {
            color: rgba(0, 0, 0, 0.54); // 4.57:1 contrast on white
            opacity: 1;
        }
        
        .dark-mode &::placeholder {
            color: rgba(255, 255, 255, 0.7); // 7.67:1 contrast on #1E1F20
        }
    }
}

// Mobile Responsive Styles
@media (max-width: $presszone-comments-breakpoint-sm) {
    .presszone-comments-editor {
        padding: $presszone-comments-spacing-sm;
    }

    .presszone-comments-editor-toolbar {
        flex-wrap: wrap;
        gap: $presszone-comments-spacing-xs;
    }

    .presszone-comments-tool-btn {
        padding: $presszone-comments-spacing-sm; // Larger touch targets
    }

    .presszone-comments-submit-btn,
    .presszone-comments-cancel-btn {
        float: none;
        width: 100%;
        display: block;
        text-align: center;
    }
}