:host([area='panel']) {
    right: var(--layout-current-edge);
    bottom: var(--layout-site-bottom);
    left: calc(var(--layout-current-edge) + var(--layout-sidebar-width));
}

:host([area='cookie']) {
    right: 0;
    bottom: 0;
    left: 0;
}

:host([area='header']) {
    top: 0;
    right: 0;
    left: 0;
}

:host([area='banner']) {
    top: var(--layout-header-height);
    right: 0;
    left: 0;
}

:host([area='sidebar']) {
    top: var(--layout-body-top);
    left: var(--layout-current-edge);
    bottom: var(--layout-site-bottom);
}

:host([area='toolbar']) {
    top: var(--layout-body-top);
    bottom: var(--layout-body-bottom);
    right: var(--layout-current-edge);
}

/* 
    Horizontal starts 
    Top to Bottom 
*/
:host([area='sidebar'][start='header']),
:host([area='toolbar'][start='header']) {
    top: 0;
}
:host([area='sidebar'][start='banner']),
:host([area='toolbar'][start='banner']) {
    top: var(--layout-header-height);
}
:host([area='sidebar'][start='body']),
:host([area='toolbar'][start='body']) {
    top: var(--layout-body-top);
}
:host([area='sidebar'][start='panel']),
:host([area='toolbar'][start='panel']) {
    top: calc(100vh - var(--layout-panel-height) - var(--layout-cookie-height));
}
:host([area='sidebar'][start='cookie']),
:host([area='toolbar'][start='cookie']) {
    top: calc(100vh - var(--layout-cookie-height));
}

/* 
    Horizontal ends 
    Top to Bottom 
*/
:host([area='sidebar'][end='header']),
:host([area='toolbar'][end='header']) {
    bottom: calc(100vh - var(--layout-header-height));
}
:host([area='sidebar'][end='banner']),
:host([area='toolbar'][end='banner']) {
    bottom: calc(
        100vh - var(--layout-header-height) - var(--layout-banner-height)
    );
}
:host([area='sidebar'][end='body']),
:host([area='toolbar'][end='body']) {
    bottom: calc(var(--layout-panel-height) + var(--layout-cookie-height));
}
:host([area='sidebar'][end='panel']),
:host([area='toolbar'][end='panel']) {
    bottom: var(--layout-cookie-height);
}
:host([area='sidebar'][end='cookie']),
:host([area='toolbar'][end='cookie']) {
    bottom: 0;
}

/* 
    Vertical starts 
    Left to right  
*/
:host([area='header'][start='edge']),
:host([area='banner'][start='edge']),
:host([area='panel'][start='edge']),
:host([area='cookie'][start='edge']) {
    left: 0;
}
:host([area='header'][start='sidebar']),
:host([area='banner'][start='sidebar']),
:host([area='panel'][start='sidebar']),
:host([area='cookie'][start='sidebar']) {
    left: var(--layout-current-edge);
}
:host([area='header'][start='body']),
:host([area='banner'][start='body']),
:host([area='panel'][start='body']),
:host([area='cookie'][start='body']) {
    left: calc(var(--layout-current-edge) + var(--layout-sidebar-width));
}
:host([area='header'][start='toolbar']),
:host([area='banner'][start='toolbar']),
:host([area='panel'][start='toolbar']),
:host([area='cookie'][start='toolbar']) {
    left: calc(
        100vw - var(--layout-current-edge) - var(--layout-toolbar-width)
    );
}

/* 
    Vertical ends 
    Left to right  
*/
:host([area='header'][end='sidebar']),
:host([area='banner'][end='sidebar']),
:host([area='panel'][end='sidebar']),
:host([area='cookie'][end='sidebar']) {
    right: calc(
        100vw - var(--layout-current-edge) - var(--layout-sidebar-width)
    );
}
:host([area='header'][end='body']),
:host([area='banner'][end='body']),
:host([area='panel'][end='body']),
:host([area='cookie'][end='body']) {
    right: calc(var(--layout-current-edge) + var(--layout-toolbar-width));
}
:host([area='header'][end='toolbar']),
:host([area='banner'][end='toolbar']),
:host([area='panel'][end='toolbar']),
:host([area='cookie'][end='toolbar']) {
    right: var(--layout-current-edge);
}
:host([area='header'][end='edge']),
:host([area='banner'][end='edge']),
:host([area='panel'][end='edge']),
:host([area='cookie'][end='edge']) {
    right: 0;
}


*,
*:before,
*:after {
    box-sizing: border-box;
}

:host {
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
    position: fixed;
    box-sizing: border-box;
    background-color: var(--color-background);
    margin: auto;
}

:host([area='panel']) {
    height: var(--layout-panel-height);
}
:host([area='cookie']) {
    height: var(--layout-cookie-height);
}
:host([area='header']) {
    height: var(--layout-header-height);
}
:host([area='banner']) {
    height: var(--layout-banner-height);
}
:host([area='sidebar']) {
    width: var(--layout-sidebar-width);
}
:host([area='toolbar']) {
    width: var(--layout-toolbar-width);
}

.handle {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    color: var(--color-contrast);
    z-index: 100;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.cursor_guard {
    position: fixed;
    top: -100vh;
    bottom: -100vh;
    left: -100vw;
    right: -100vw;
    z-index: 1000000;
}

/* Horizontal */
:host([area='panel']) .handle, :host([area='cookie']) .handle, :host([area='header']) .handle, :host([area='banner']) .handle {
        left: 0;
        right: 0;
        height: 34px;
        width: 100%;
        cursor: row-resize;
    }
:host([area='panel']) .cursor_guard, :host([area='cookie']) .cursor_guard, :host([area='header']) .cursor_guard, :host([area='banner']) .cursor_guard {
        cursor: row-resize;
    }

/* Top */
:host([area='panel']) .handle, :host([area='cookie']) .handle {
        top: 0;
        border-top: 4px solid var(--color-shade-20);
    }

/* Bottom */
:host([area='header']) .handle, :host([area='banner']) .handle {
        bottom: 0;
        border-bottom: 4px solid var(--color-shade-20);
    }

/* Vertical */
:host([area='sidebar']) .handle, :host([area='toolbar']) .handle {
        top: 0;
        bottom: 0;
        width: 34px;
        height: 100%;
        cursor: col-resize;
    }
:host([area='sidebar']) .handle es-icon, :host([area='toolbar']) .handle es-icon {
            transform: rotate(90deg);
        }
:host([area='sidebar']) .cursor_guard, :host([area='toolbar']) .cursor_guard {
        cursor: col-resize;
    }

/* Right */
:host([area='sidebar']) .handle {
        right: 0;
        border-right: 4px solid var(--color-shade-20);
    }

/* Left */
:host([area='toolbar']) .handle {
        left: 0;
        border-left: 4px solid var(--color-shade-20);
    }

[part*='inner'] {
    flex: 1 1 100%;
    padding: 24px 40px 0 40px;
    overflow-x: hidden;
    overflow-y: auto;
}