@use "../core/variables" as *;
@use "../core/mixins" as *;

// =============================================================
// Contenu riche partagé
// =============================================================
// Exception assumée au BEM : le HTML interne est généré par Trumbowyg et
// n'est pas entièrement piloté par les templates Twig. Les sélecteurs
// descendants sont donc réservés à .rich-text et à .trumbowyg-editor.

.rich-text,
.trumbowyg-editor {
    word-break: break-word;
    overflow-wrap: break-word;

    p, ul, ol, blockquote, pre {
        margin: 0 0 $spacing-md;
    }

    ul, ol {
        padding-left: 1.25rem;
    }

    blockquote {
        margin-left: 0;
        padding-left: $spacing-md;
        border-left: 3px solid $color-border;
        color: $color-text-muted;
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: $radius-md;
        margin: $spacing-sm 0;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: $spacing-md;
    }

    th, td {
        border: 1px solid $color-border;
        padding: $spacing-sm;
        text-align: left;
    }
}

.trumbowyg-box,
.trumbowyg-editor,
.trumbowyg-button-pane {
    font: inherit;
    font-weight: $font-weight-regular;
}

.trumbowyg-box,
.trumbowyg-editor {
    min-height: 300px;
}

.trumbowyg-box {
    width: 100%;
    box-sizing: border-box;
    border-radius: $radius-md;

    @include interactive-transition;

    &:focus-within {
        @include focus-ring;
    }
}

.trumbowyg-button-pane button {
    @include interactive-transition;

    &:focus-visible {
        outline: 2px solid $focus-ring-color;
        outline-offset: 2px;
    }
}