.collapsable-item {
    position: relative;
    display: grid;
    grid-template-columns: 2.25em max-content;
    grid-template-rows: max-content;
    width: max-content;
    background: white;
    box-shadow: var(--theme-color-grey-dark) 3px 3px 6px 1px;
    margin-top: 6px;
    overflow: hidden;
    transition: 1s;
}

    /*.collapsable-item:not(.collapsed) {
        grid-template-columns: 2.25em 1fr;
    }

    .collapsable-item.collapsed {
        grid-template-columns: 2.25em 0fr;
    }*/

    .collapsable-item .collapsable-item-icon-container {
        grid-column: 1;
        display: flex;
        width: 100%;
        height: 100%;
        background: var(--theme-color-grey-dark);
        border-right: 1px solid black;
        z-index: 1;
    }

    .collapsable-item .collapsable-item-icon {
/*        --default-background: undefined;
        --hover-background: undefined;
        --active-background: undefined;*/
        height: 2.25em;
        width: 2.25em;
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        margin: 0 auto;
        padding: 0.25em;
        object-fit: contain;
        border-radius: 0;
    }

    .collapsable-item:not(.info, .warning, .alert) {
        --default-background: var(--theme-color-text-light);
        --hover-background: var(--theme-color-grey-light);
        --active-background: var(--theme-color-grey-dark);
    }

    .collapsable-item.info:not(.warning, .alert) {
        --default-background: var(--theme-color-blue-light);
        --hover-background: var(--theme-color-blue);
        --active-background: var(--theme-color-blue-dark);
    }

    .collapsable-item.warning:not(.alert) {
        --default-background: var(--theme-color-orange-light);
        --hover-background: var(--theme-color-orange);
        --active-background: var(--theme-color-orange-dark);
    }

    .collapsable-item.alert {
        --default-background: var(--theme-color-red-light);
        --hover-background: var(--theme-color-red);
        --active-background: var(--theme-color-red-dark);
    }

        .collapsable-item .collapsable-item-icon:not(:hover, :active) {
            background: var(--default-background);
        }
        .collapsable-item .collapsable-item-icon:hover:not(:active) {
            background: var(--hover-background);
        }
        .collapsable-item .collapsable-item-icon:active {
            background: var(--active-background);
        }

    .collapsable-item .collapsable-item-content {
        grid-column: 2;
        max-width: 30em;
        transition-property: transform, max-height, overflow, padding, max-width;
        transition-duration: 0.5s, 0.5s, 1s, 0s, 0.5s;
        transition-behavior: allow-discrete;
    }

    .collapsable-item:not(.collapsed) .collapsable-item-content {
        transition-delay: 0s, 0s, 0s, 0s, 0s;
    }

    .collapsable-item.collapsed .collapsable-item-content {
        max-height: calc(2.25em - 1px);
        max-width: 0;
        padding: 0 0 0 0;
        transform: translateX(-100%);
        transition-delay: 0s, -1s, 0s, 0.5s, 0s;
        overflow: hidden;
    }

    .collapsable-item .collapsable-item-message {
        height: max-content;
        margin: auto;
        max-height: 3em;
        overflow: hidden auto;
        padding: 0.1em 0.25em;
    }

    .collapsable-item .collapsable-item-message-container {
    }

        .collapsable-item .collapsable-item-message-container .message {
        }