smart-layout {
    display: block;
    --smart-layout-buttons-border-radius: 50%;
    --smart-splitter-bar-size: 2px;
    --smart-layout-context-menu-default-width: var(--smart-menu-vertical-default-width);
    --smart-layout-context-menu-default-height: auto;
    overflow: initial;
    width: 600px;
    height: 600px;
}

    smart-layout > .smart-container {
        position: relative;
    }

/* Splitter settings */

.smart-layout .smart-splitter {
    height: 100%;
    width: 100%;
    border: initial;
}

.smart-layout smart-splitter-bar {
    z-index: 1;
    overflow: visible;
}

    .smart-layout smart-splitter-bar > .smart-container {
        transform: scaleX(3);
        transform-origin: left;
    }

.smart-layout .smart-splitter[orientation="horizontal"] > .smart-container > smart-splitter-bar > .smart-container {
    transform: scaleY(3);
    transform-origin: top;
}

.smart-layout .smart-splitter .smart-splitter-resize-button {
    display: none;
}

.smart-layout .smart-splitter smart-splitter-bar,
.smart-layout .smart-splitter .smart-splitter-bar-feedback {
    min-width: 1px;
}

.smart-layout .smart-splitter[orientation="horizontal"] > .smart-container > smart-splitter-bar,
.smart-layout .smart-splitter[orientation="horizontal"] > .smart-container > .smart-splitter-bar-feedback {
    min-height: 1px;
}

.smart-layout .smart-splitter-item[selected]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 2.5px 0 inset var(--smart-primary);
    top: 0;
    left: 0;
    pointer-events: none;
}

.smart-layout smart-splitter-item.smart-element {
    /*border: var(--smart-item-border-width) solid var(--smart-border);*/
    border-radius: var(--smart-border-radius);
    position: relative;
}

/* Menu Settings */

.smart-layout:not([animation='none']) .smart-layout-context-menu {
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}

.smart-layout .smart-layout-context-menu {
    opacity: 1;
    transform: scale(1);
    transform-origin: 0;
    -webkit-transform-origin: 0;
}

    .smart-layout .smart-layout-context-menu.smart-visibility-hidden {
        opacity: 0.2;
        transform: scale(0);
    }

.smart-layout .smart-layout-context-menu {
    position: absolute;
    background: var(--smart-background);
    color: var(--smart-background-color);
    box-shadow: var(--smart-elevation-8);
    border-radius: var(--smart-border-radius);
    width: var(--smart-layout-context-menu-default-width);
    height: var(--smart-layout-context-menu-default-height);
    z-index: var(--smart-editor-drop-down-z-index);
}

    .smart-layout .smart-layout-context-menu > div:not([disabled]) {
        cursor: pointer;
    }

    .smart-layout .smart-layout-context-menu > div {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
    }

        .smart-layout .smart-layout-context-menu > div[hover] {
            background-color: var(--smart-ui-state-hover);
            border-color: var(--smart-ui-state-border-hover);
            color: var(--smart-ui-state-color-hover);
        }

        .smart-layout .smart-layout-context-menu > div[disabled] {
            pointer-events: none;
            cursor: default;
            opacity: 0.5;
        }

/* Layout Buttons */
.smart-layout .smart-layout-buttons-container div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smart-border);
    font-family: var(--smart-font-family-icon);
    font-size: var(--smart-font-size);
    padding: 5px;
    left: calc(50% - var(--smart-editor-addon-width)/2);
    width: var(--smart-editor-addon-width);
    height: var(--smart-editor-addon-width);
    cursor: pointer;
    border-top-left-radius: var(--smart-layout-buttons-border-radius);
    border-top-right-radius: var(--smart-layout-buttons-border-radius);
    border-bottom-left-radius: var(--smart-layout-buttons-border-radius);
    border-bottom-right-radius: var(--smart-layout-buttons-border-radius);
    z-index: 1;
}

    .smart-layout .smart-layout-buttons-container div:hover {
        color: var(--smart-ui-state-color-hover);
        border-color: var(--smart-ui-state-hover);
        background-color: var(--smart-ui-state-hover);
        opacity: var(--smart-button-opacity-active);
    }

.smart-layout:not([animation="none"]) .smart-layout-buttons-container div:hover,
.smart-layout:not([animation="none"]) .smart-layout-buttons-container div:active {
    transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
}

.smart-layout .smart-layout-buttons-container div:active {
    color: var(--smart-ui-state-color-active);
    border-color: var(--smart-ui-state-active);
    background-color: var(--smart-ui-state-active);
    opacity: var(--smart-button-opacity-active);
}

.smart-layout .smart-layout-buttons-container div::after {
    content: var(--smart-icon-plus);
}

.smart-layout .smart-layout-buttons-container div[position="left"], 
.smart-layout .smart-layout-buttons-container div[position="right"] {
    left: initial;
    top: calc(50% - var(--smart-editor-addon-width)/2);
}

.smart-layout .smart-layout-buttons-container div[position="left"] {
    left: 0;
}

.smart-layout .smart-layout-buttons-container div[position="right"] {
    right: 0;
}

.smart-layout .smart-layout-buttons-container div[position="top"] {
    top: 0;
}

.smart-layout .smart-layout-buttons-container div[position="bottom"] {
    bottom: 0;
}

.smart-layout:not([animation="none"]) .smart-layout-buttons-container div[position="left"] {
    animation: leftRight 0.2s ease-in;
}

.smart-layout:not([animation="none"]) .smart-layout-buttons-container div[position="right"] {
    animation: rightLeft 0.2s ease-in;
}

.smart-layout:not([animation="none"]) .smart-layout-buttons-container div[position="top"] {
    animation: topBottom 0.2s ease-in;
}

.smart-layout:not([animation="none"]) .smart-layout-buttons-container div[position="bottom"] {
    animation: bottomTop 0.2s ease-in;
}

@keyframes topBottom {
    0% {
        top: calc(-1 * var(--smart-editor-addon-width));
    }

    100% {
        top: 0;
    }
}

@keyframes bottomTop {
    0% {
        bottom: calc(-1 * var(--smart-editor-addon-width));
    }

    100% {
        bottom: 0;
    }
}

@keyframes leftRight {
    0% {
        left: calc(-1 * var(--smart-editor-addon-width));
    }

    100% {
        left: 0;
    }
}

@keyframes rightLeft {
    0% {
        right: calc(-1 * var(--smart-editor-addon-width));
    }

    100% {
        right: 0;
    }
}