:host {
    /* this is used for styling ibgib components for multi-view coordination, so
     * that ibgib views that are looking at the same ibgib can be visibly shown
     * as doing so. */
    --ibgib-color: #ff00dd;
    --ibgib-color-translucent: #ff00dd10;
    --tjp-color: #00ffae;
    --tjp-color-translucent: #00ffae10;
}

/* Basic layout and styling for the raw component */
#text-editor-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    /* Use consistent padding */
    padding: 1%;
    overflow: hidden;

    /* ibgib styling */
    border: var(--tjp-color) 5px solid;
    box-shadow: 0 0 10px var(--tjp-color);
    border-radius: 5px;

    /* Optional: If using flexbox to control vertical alignment */
    /* justify-content: center;  Align content vertically */

    #text-editor-header {
        display: flex;
        flex-direction: row;
        height: 5%;

        #text-editor-name {
            width: 25%;
            font-weight: bold;
            font-size: x-small;
            overflow-x: clip;
        }

        #text-editor-version {
            width: 8%;
            font-weight: lighter;
            font-size: x-small;
            font-style: italic;
        }

        #text-editor-description {
            width: 67%;
            white-space: pre-wrap;
            font-style: italic;
            font-size: xx-small;
        }

        /* #text-editor-description.collapsed {
            display: none;
        } */
    }

    #text-editor-content {
        height: 95%;

        textarea {
            height: 100%;
            width: 100%;
            word-wrap: normal;
            text-wrap: stable;
            text-wrap-mode: wrap;
            margin: 0px;
            resize: none;
            overflow: auto;
        }
    }


}