: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 */
#raw-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    /* Use consistent padding */
    padding: 1%;

    /* 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 */

    #raw-header {
        display: flex;
        flex-direction: column;

        #raw-name {
            font-weight: bold;
            /* font-size: larger; */
            /* Use variables for spacing? */
            /* margin-bottom: 0.5em; */
        }

        #raw-description {
            /* Respect newlines */
            white-space: pre-wrap;
            font-style: italic;
        }

        #raw-description.collapsed {
            display: none;
        }
    }

    #raw-content {

        .accordion-section {
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            border-radius: 4px;
            /* For the slide-down effect */
            overflow: hidden;
        }

        .accordion-header {
            background-color: #f7f7f7;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
            /* Prevent text selection */
            user-select: none;
            /* Remove default margin */
            margin: 0;
            padding: 10px 15px;

            border: var(--tjp-color-contrast) 5px solid;
            box-shadow: 0 0 10px var(--tjp-color);
            color: var(--tjp-color-contrast);
            background-color: var(--tjp-color);
        }

        .accordion-header:hover {
            border: var(--tjp-color) 5px solid;
            color: var(--tjp-color);
            background-color: var(--tjp-color-contrast);
        }

        .accordion-content {
            transition: padding 0.3s ease-in-out, max-height 0.3s ease-in-out;
            /* display: none; */
            max-height: 0px;
            /* Hidden by default */
            padding: 0;
            margin: 0;

            ul {
                display: none;
            }
        }

        .accordion-content.expanded {
            padding: 10px 15px;
            max-height: 33dvh !important;
            /* Show all content */
            overflow: auto;
            border-top: 1px solid #e0e0e0;

            ul {
                display: block;
            }
        }

        .accordion-content pre {
            margin: 0;
        }

        pre {
            white-space: pre-wrap;
            /* overflow: auto; */
            margin: 0px;
        }
    }


}