kreise-panel-container {

    width: 100%;
    border: 1px solid rgb(0, 0, 0, 0);
    padding: 2px;

    transition: border-color 0.5s ease, box-shadow 0.5s ease;

}

/* hovering a container hightlights the content */
kreise-panel-container.highlighted {

    /* Make the border brighter (using your main color or a brighter decent) */
    border-color: rgb(var(--second-decent));
    border-width: 3px;
    padding: 0px;

    /* Add a subtle glow matching the border color */
    box-shadow: 0 0 8px rgba(var(--main-color), 0.4);

    /* Optional: If you want it to pop forward slightly */
    /* z-index: 10; */
    /* position: relative; */
}

/* MARK: Container Header 
    */

div.kreise-panel-container-header {

    background-color: rgb(var(--second-decent));
    display: flex;
    flex-direction: row;
    justify-content: space-between;


}


div.kreise-panel-container-header button {
    height: 1.5em;
}

/* <element1 constraint><all elements tooltiptext> */
div.kreise-panel-container-header .tooltipText {
    margin-left: -180px;
}

/* any descendent */
div.kreise-panel-container-header .tooltipText::after {
    left: 180px;
}

k
/* MARK: Container Content 
    */

div.kreise-panel-container-content {


    display: flex;
    justify-content: space-between;
    padding: 5px;
    gap: 5px;
    box-sizing: border-box;

}

div.kreise-panel-container-content-vertical {
    display: flex;
    flex-direction: column;
}

div.kreise-panel-container-content-horizontal {
    display: flex;
    flex-direction: row;
}

div.kreise-panel-container-dropzonehint {

    position: fixed;
    pointer-events: none;
    background-color: rgb(var(--third-decent), 0.3);
    z-index: 999;
    /* Below the floating panel, above everything else */
    /* Animation */
    opacity: 0;
    transform: scale(0.5);
    transition: opacity .5s ease, transform .5s ease;
    /* Slight "pop" effect on enter */

}


/* <element with both classes> */
div.kreise-panel-container-dropzonehint.active {
    opacity: 1;
    transform: scale(1);
}


/* MARK: Undistracted 
    */

kreise-panel-container.undistracted {

    border-width: 0px;
    padding: 0px;

}

kreise-panel-container.undistracted div.kreise-panel-container-header {

    display: none;

}

kreise-panel-container.undistracted div.kreise-panel-container-content {

    padding: 0px;
    gap: 0px;

}


/* MARK: Panel 
    */


kreise-panel,
.kreise-panel {

    border: 1px solid rgb(var(--main-color));

}

div.kreise-panel-header {

    background-color: rgb(var(--first-decent));

}

div.kreise-panel-content {}