@import '../../styles/variables.less';


:host {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    & div.preset-container {
        top: 48px;
        bottom: 0px;
        height: auto;
    }
    & div.title {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        left:0;
        right: 0;
        padding: 0 8px;
        background: var(--scheme-color-5);
        box-shadow: 0 3px 3px rgba(0,0,0,0.4);
        height: 48px;
        overflow: hidden;
        & *.entity {
            display: flex;
            flex-direction: row;
            align-items: center;
            left:0;
            right: 0;
            padding: 0 8px;
            background: var(--scheme-color-5);
            height: 48px;
            &.filler {
                flex: auto;
                width: 100%;
                margin: 0;
                justify-content: end;
            }
            &.info {
                color: var(--scheme-color-2);
                white-space: nowrap;
                align-items: center;
                flex: auto;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                & span {
                    margin-left: 8px;
                }
            }
            & button {
                position: relative;
                display: inline-block;
                margin: 0 16px 0 0;
                margin-bottom: 0!important;
                &:last-child {
                    margin-right: 0;
                }
            }
            & p.info {
                color: var(--scheme-color-2);
                white-space: nowrap;
            }
        }
        & > * {
            margin: 0 8px;
        }
    }
}