.interaction-container {
    position        : absolute;
    z-index         : var(--z-index-notice);
    top             : 0;
    left            : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    transition      : 0.3s;
    pointer-events  : none;
    backdrop-filter : blur(0px);
}

.interaction-container:before {
    position         : absolute;
    z-index          : var(--z-index-pushback);
    top              : 0;
    display          : block;
    width            : 100%;
    height           : 100%;
    content          : "";
    pointer-events   : all;
    opacity          : .35;
    background-color : black;
}
.interaction-container {

}
.interaction-container[data-block] {
    backdrop-filter : blur(25px);
}

.interaction-container[data-block] {
}


.interaction {
    display             : grid;
    overflow            : hidden;
    min-width           : 250px;
    max-width           : 90vw;
    height              : auto;
    max-height          : 50vh;
    transition          : var(--fast-visibility-transition);
    pointer-events      : all;
    border-radius       : var(--theme-border-radius);
    background-color    : var(--theme-popup-bg);
    box-shadow          : var(--standard-box-shadow);
    grid-template-areas :
        "header "
        "body"
        "footer";
    grid-template-rows  : auto auto auto;
}

.interaction > [data-segment="title"] {
    font-weight             : bold;
    display                 : grid;
    align-items             : center;
    justify-content         : flex-start;
    color                   : var(--theme-font-on-primary);
    border-top-left-radius  : var(--std-unit-x1);
    border-top-right-radius : var(--std-unit-x1);
    background-color        : var(--theme-primary-dark);
    grid-template-columns   : 1fr 25px;
    grid-template-rows      : 1fr;
    grid-template-areas     : "title close";
    grid-area               : header;
}

.interaction > [data-segment] {
    padding : var(--std-unit-x2);
}

.interaction[data-type="notice"] > [data-segment="title"] {
    color            : var(--theme-popup-header-color-0);
    background-color : var(--theme-notice-dark);
}

.interaction[data-type="error"] > [data-segment="title"] {
    background-color : var(--theme-error-dark);
}

.interaction[data-type="warning"] > [data-segment="title"] {
    color            : var(--theme-popup-header-color-0);
    background-color : var(--theme-warning-dark);
}

.interaction[data-type="affirm"] > [data-segment="title"] {
    background-color : var(--theme-ok-dark);
}

.interaction > [data-segment="title"] > * {
    padding : 0 var(--secondary-margin);
}
.interaction > [data-segment="title"] > *:before {
    color : var(--theme-popup-header-color-0);
}


.interaction > [data-segment="title"] > [data-title] {
    grid-area : title;
}


.interaction > [data-segment="title"] > [data-close] {
    grid-area : close;
}

.interaction > [data-segment="title"] > [data-close]:before {
    font-family     : var(--FontAwesome);
    display         : flex;
    align-items     : center;
    justify-content : center;
    content         : var(--FA-icon-times);
}

.interaction > [data-segment="title"] > [data-close]:hover {
    cursor : pointer;
}


.interaction > [data-segment="body"] {
    overflow    : auto;
    max-height  : 40vh;
    white-space : normal;
    grid-area   : body;
}

.interaction > [data-segment="body"] > [data-degment="message"] {
    height : 100%;
}

.interaction [data-segment="message"] > [data-message] {
    padding       : var(--std-unit-x2);
    border-radius : var(--theme-border-radius);
}

.interaction [data-segment="message"] > [data-message] > div {
}

.interaction [data-segment="message"] > [data-message]:not(:only-child):hover {
    background-color : var(--color-translucent-black-lvl-0_5);
}

.interaction [data-segment="message"] > div[data-message]:not(:only-child) {
    position     : relative;
    padding-left : calc(var(--std-unit-x3) * 4);
}

.interaction [data-segment="message"] > [data-message]:not(:only-child):before {
    font-family     : var(--FontAwesome);
    font-size       : 1.5rem;
    font-weight     : bold;
    position        : absolute;
    top             : 0;
    left            : 5px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 100%;
    content         : var(--FA-icon-caret-right);
}


.interaction > [data-segment="body"] > [data-message] {
    display  : grid;
    overflow : auto;
    margin   : var(--standard-margin) 0;
    grid-gap : var(--standard-margin);
}

.interaction > [data-segment="body"] > [data-error-disclaimer] {
    display         : grid;
    align-items     : center;
    justify-content : flex-start;
    margin-left     : var(--std-unit-x6);
}

.interaction > [data-segment="footer"] {
    display               : grid;
    grid-area             : footer;
    grid-template-areas   :
        "gap buttons";
    grid-template-columns : 1fr min-content;
}

.interaction > [data-segment="footer"] > [data-buttons] {
    display         : flex;
    align-items     : center;
    justify-content : center;
    grid-area       : buttons;
    grid-gap        : var(--secondary-margin);
}