smart-docking-layout {
    width: var(--smart-docking-layout-default-width);
    height: var(--smart-docking-layout-default-height);
}

    smart-docking-layout.smart-element {
        overflow: initial;
    }

.smart-docking-layout > .smart-container,
:host(smart-docking-layout) > .smart-container {
    overflow: hidden;
}

.smart-docking-layout[dragged] > .smart-container {
    overflow: visible;
}

.smart-docking-layout .smart-items-container,
.smart-docking-layout .smart-horizontal-hidden-items-container,
.smart-docking-layout .smart-vertical-hidden-items-container {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.smart-docking-layout[dragged],
.smart-docking-layout smart-tabs-window.smart-window:not(.smart-docking-layout-auto-hide-window) > .smart-container > .smart-header-section,
.smart-docking-layout smart-tabs-window.smart-window[pinned]:not(.smart-docking-layout-auto-hide-window) > .smart-container > .smart-header-section,
.smart-docking-layout .smart-docking-layout-auto-hide-window.smart-window > .smart-container:not([class*="smart-window-resizing"]) > .smart-header-section {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.smart-docking-layout .smart-window > .smart-container > .smart-content {
    align-items: stretch;
}

.smart-docking-layout smart-tabs-window.smart-window {
    width: 100%;
    height: 100%;
    max-width: 100%;
    top: initial;
    left: initial;
    transform: initial;
    border-radius: 0;
}

    .smart-docking-layout smart-tabs-window.smart-window:not([animation='none']) {
        transition: transform 0.2s ease-out;
    }

    .smart-docking-layout smart-tabs-window.smart-window[collapsed] {
        height: 100%;
    }

    .smart-docking-layout smart-tabs-window.smart-window[auto-hide],
    .smart-docking-layout smart-tabs-window.smart-window[auto-hide] smart-tabs {
        height: 100%;
        width: 100%;
    }

.smart-docking-layout smart-splitter {
    border: none;
}

.smart-docking-layout smart-splitter-item smart-tabs-window.smart-window[auto-hide] > .smart-container > .smart-content {
    height: 100%;
}

.smart-docking-layout smart-tabs-window.smart-window[tabs-window-dragged]:not(.smart-tabs-window-feedback) {
    transform: scale(0.75);
}

smart-tabs-window[tabs-window-dragged]:not(.smart-tabs-window-feedback) {
    transform: scale(0.2);
}

.smart-docking-layout smart-splitter-item smart-tabs-window.smart-window:not([animation="none"]) {
    transition: none;
    animation: none;
    border: none;
}

smart-tabs-window.smart-window[tabs-window-dragged] {
    animation: none;
    position: absolute;
    opacity: 0.5;
    transform: scale(0.2);
    transform-origin: top left;
    z-index: 10001;
    pointer-events: none;
    min-width: 400px;
    min-height: 400px;
}

    smart-tabs-window.smart-window[tabs-window-dragged]:not([animation="none"]) {
        transition: transform 0.2s ease-in;
        animation: scaleInNo 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

@keyframes scaleInNo {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.2);
    }
}

smart-tabs-window.smart-window[tabs-window-dragged] > .smart-container > .smart-header-section,
.smart-docking-layout .smart-docking-layout-auto-hide-window[opened] > .smart-container > .smart-header-section {
}

.smart-docking-layout smart-tabs-window.smart-window[ontop]:not([tabs-window-dragged]) {
    z-index: initial;
}

.smart-docking-layout .smart-tabs-window-feedback.smart-window {
    position: absolute;
    opacity: 0;
    max-width: 400px;
    max-height: 400px;
    pointer-events: none;
}

    .smart-docking-layout .smart-tabs-window-feedback.smart-window:not([animation="none"]) {
        transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out;
    }

.smart-docking-layout .smart-tabs-window-feedback[tabs-window-dragged] {
    z-index: 10001;
    opacity: 0.9;
    transform: scale(0.2);
    min-width: 400px;
    min-height: 400px;
}

.smart-docking-snap-right-feedback,
.smart-docking-snap-left-feedback,
.smart-docking-snap-top-feedback,
.smart-docking-snap-bottom-feedback {
    transition: all 0.05s cubic-bezier(0.4, 0.0, 0.6, 1);
    z-index: 10001;
    position: absolute;
    opacity: 0.65;
    box-shadow: 0 0 1px 1px var(--smart-dokcing-layout-feedback-border-color);
    border-radius: 2px;
    border-top-left-radius: var(--smart-border-top-left-radius);
    border-top-right-radius: var(--smart-border-top-right-radius);
    border-bottom-left-radius: var(--smart-border-bottom-right-radius);
    border-bottom-right-radius: var(--smart-border-bottom-right-radius);
    animation: scaleIn 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: scale(1);
    pointer-events: none;
}

.smart-docking-snap-right-feedback {
    width: 50%;
    left: calc(50% - 5px);
}

.smart-docking-snap-header-feedback,
.smart-docking-snap-layout-left-feedback,
.smart-docking-snap-layout-right-feedback,
.smart-docking-snap-layout-top-feedback,
.smart-docking-snap-layout-bottom-feedback {
    position: absolute;
    opacity: 0.65;
    box-shadow: 0 0 1px 1px var(--smart-background-color);
    border-radius: var(--smart-border-radius);
    animation: scaleIn 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: scale(1);
    pointer-events: none;
    cursor: pointer;
    z-index: 10001;
}

    .smart-docking-snap-header-feedback[disabled]::after,
    .smart-docking-snap-left-feedback[disabled]::after,
    .smart-docking-snap-right-feedback[disabled]::after,
    .smart-docking-snap-top-feedback[disabled]::after,
    .smart-docking-snap-bottom-feedback[disabled]::after,
    .smart-docking-snap-layout-left-feedback[disabled]::after,
    .smart-docking-snap-layout-right-feedback[disabled]::after,
    .smart-docking-snap-layout-bottom-feedback[disabled]::after,
    .smart-docking-snap-layout-top-feedback[disabled]::after {
        position: absolute;
        content: var(--smart-icon-block);
        font-family: var(--smart-font-family-icon);
        opacity: 0.25;
        color: red;
        font-size: calc(2.5 * 14px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.smart-docking-layout .smart-window .smart-buttons-container .smart-dock-button:after {
    content: var(--smart-icon-arrow-up-alt);
    font-size: 0.8rem;
}

.smart-docking-layout .smart-window .smart-buttons-container .smart-menu-button:after {
    content: var(--smart-icon-menu);
    transform: rotate(180deg);
    font-size: 0.8rem;
}

.smart-docking-layout .smart-window .smart-buttons-container .smart-auto-hide-button:after,
smart-tabs-window.smart-window .smart-buttons-container .smart-auto-hide-button:after {
    content: var(--smart-icon-arrow-up-alt);
    font-size: 0.8rem;
}

.smart-docking-snap-layout-left-feedback,
.smart-docking-snap-layout-right-feedback {
    max-width: 50px;
}

.smart-docking-snap-layout-top-feedback,
.smart-docking-snap-layout-bottom-feedback {
    max-height: 50px;
}

.smart-docking-snap-header-feedback,
.smart-docking-snap-layout-left-feedback,
.smart-docking-snap-layout-right-feedback,
.smart-docking-snap-layout-top-feedback,
.smart-docking-snap-layout-bottom-feedback {
    transition: width 0.05s cubic-bezier(0.4, 0.0, 0.2, 1), height 0.05s cubic-bezier(0.4, 0.0, 0.2, 1), top 0.05s cubic-bezier(0.4, 0.0, 0.6, 1), animation 0.2s cubic-bezier(0.4, 0.0, 0.6, 1), left 0.05s cubic-bezier(0.4, 0.0, 0.2, 1);
    animation: scaleIn 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

    .smart-docking-snap-header-feedback.smart-visibility-hidden,
    .smart-docking-snap-layout-left-feedback.smart-visibility-hidden,
    .smart-docking-snap-layout-right-feedback.smart-visibility-hidden,
    .smart-docking-snap-layout-top-feedback.smart-visibility-hidden,
    .smart-docking-snap-layout-bottom-feedback.smart-visibility-hidden {
        transition: animation 0.2s cubic-bezier(0.4, 0.0, 0.6, 1), visibility 0.2s cubic-bezier(0.4, 0.0, 0.6, 1), top 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), left 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
        animation: scaleOut 0.2s cubic-bezier(0.4, 0.0, 0.6, 1);
        transform: scale(0);
    }

.smart-docking-snap-layout-left-feedback,
.smart-docking-snap-layout-right-feedback,
.smart-docking-snap-layout-top-feedback,
.smart-docking-snap-layout-bottom-feedback {
    transform-origin: left;
}

.smart-docking-layout smart-tabs-window.smart-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    box-shadow: none;
    border: var(--smart-border-width) solid var(--smart-border);
}

    .smart-docking-layout smart-tabs-window.smart-window smart-tabs {
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    .smart-docking-layout smart-tabs-window.smart-window[auto-hide] {
        border: none;
    }

        .smart-docking-layout smart-tabs-window.smart-window[auto-hide] .smart-container > .smart-content {
            padding: 0;
        }

.smart-docking-layout .smart-window .smart-dock-button:after {
    content: var(--smart-icon-arrow-up);
    font-size: 0.8rem;
}

.smart-docking-layout .smart-window[focused] {
    box-shadow: none;
}

smart-docking-layout:not([animation="none"]) .smart-window .smart-dock-button:after {
    transition: transform 0.2s ease;
}

.smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-left > .smart-container::after,
.smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-right > .smart-container::after,
.smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-top > .smart-container::after,
.smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-bottom > .smart-container::after {
    content: '';
}

@-moz-document url-prefix() {
    .smart-docking-layout smart-splitter-item[locked].auto-hide-top {
        line-height: 100%;
    }
}


.smart-docking-layout smart-tabs-window.smart-window[auto-hide] > .smart-container > .smart-content {
    overflow: hidden;
}

smart-tabs-window.smart-window[auto-hide] > .smart-container > .smart-content {
    padding: 5px;
}

.smart-docking-layout smart-tabs-window.smart-window .smart-pin-button,
.smart-docking-layout smart-tabs-window.smart-window .smart-maximize-button,
.smart-docking-layout smart-tabs-window.smart-window .smart-minimize-button {
    display: none;
}

.smart-docking-layout smart-placeholder .smart-window .smart-content {
    height: 100%;
}

.smart-docking-layout .smart-placeholder .smart-window > .smart-container > .smart-header-section {
    min-height: 0;
    height: 0;
    padding: 0;
}

.smart-docking-layout .smart-docking-layout-item-holder {
    width: 100%;
    height: 100%;
}

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

.smart-docking-layout[snap-mode="advanced"] smart-splitter-item .smart-content {
    overflow: hidden;
}

.smart-docking-layout .smart-horizontal-hidden-items-container > .smart-container > smart-splitter-item,
.smart-docking-layout .smart-vertical-hidden-items-container > .smart-container > smart-splitter-item {
    background-color: transparent;
}

.smart-docking-layout smart-splitter-item.smart-placeholder smart-tab-item .smart-container:after {
    content: 'Drop Items Here';
    font-family: var(--smart-font-family-icon);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    padding: 15px;
    color: gray;
    opacity: 0.75;
}

/* Edge-specific fix */
@supports (-ms-ime-align:auto) {
    .smart-docking-layout smart-tabs[vertical] > .smart-container {
        display: table-cell;
    }
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="right"][opened] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: left;
    animation: leftToRightIn 0.2s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="right"] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: left;
    animation: leftToRightOut 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="left"][opened] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: right;
    animation: rightToLeftIn 0.2s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="left"] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: right;
    animation: rightToLeftOut 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="top"][opened] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: bottom;
    animation: bottomToTopIn 0.2s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="top"] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: bottom;
    animation: bottomToTopOut 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="bottom"][opened] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: top;
    animation: topToBottomIn 0.2s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="bottom"] {
    transition: animation, visibility 0.2s ease-in;
    transform-origin: top;
    animation: topToBottomOut 0.2s cubic-bezier(0.4, 0.0, 1, 1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="left"]:not([animation="none"]).smart-visibility-hidden,
.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="right"]:not([animation="none"]).smart-visibility-hidden {
    transform: scaleX(0);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="top"]:not([animation="none"]).smart-visibility-hidden,
.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="bottom"]:not([animation="none"]).smart-visibility-hidden {
    transform: scaleY(0);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="left"]:not([animation="none"]),
.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="right"]:not([animation="none"]) {
    transform: scaleX(1);
}

.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="top"]:not([animation="none"]),
.smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode="bottom"]:not([animation="none"]) {
    transform: scaleY(1);
}

@keyframes leftToRightIn {
    0% {
        transform: scaleX(0);
    }
}

@keyframes leftToRightOut {
    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes rightToLeftIn {
    0% {
        transform: scaleX(0);
    }
}

@keyframes rightToLeftOut {
    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes bottomToTopIn {
    0% {
        transform: scaleY(0);
    }
}

@keyframes bottomToTopOut {
    0% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }
}

@keyframes topToBottomIn {
    0% {
        transform: scaleY(0);
    }
}

@keyframes topToBottomOut {
    0% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
    }
}

/* -------- Docking Layout Visual Studio style highlighter -------- */

.smart-docking-layout-snap {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .smart-docking-layout-snap > div {
        width: 100%;
        height: calc(100% / 3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .smart-docking-layout-snap .top,
    .smart-docking-layout-snap .bottom,
    .smart-docking-layout-snap .left,
    .smart-docking-layout-snap .right,
    .smart-docking-layout-snap .center {
        width: 35px;
        height: 35px;
        float: left;
        padding: 2px;
        overflow: hidden;
        opacity: 0.25;
    }

        .smart-docking-layout-snap .left[show],
        .smart-docking-layout-snap .right[show],
        .smart-docking-layout-snap .top[show],
        .smart-docking-layout-snap .bottom[show],
        .smart-docking-layout-snap .center[show],
        .smart-docking-layout-snap.layout-top[show],
        .smart-docking-layout-snap.layout-bottom[show],
        .smart-docking-layout-snap.layout-left[show],
        .smart-docking-layout-snap.layout-right[show] {
            opacity: 1;
        }

        .smart-docking-layout-snap .top > div,
        .smart-docking-layout-snap .bottom > div,
        .smart-docking-layout-snap .left > div,
        .smart-docking-layout-snap .right > div,
        .smart-docking-layout-snap .center > div,
        .smart-docking-layout-snap.layout-top > div,
        .smart-docking-layout-snap.layout-bottom > div,
        .smart-docking-layout-snap.layout-left > div,
        .smart-docking-layout-snap.layout-right > div {
            width: 100%;
            height: 100%;
            border: 1px solid var(--smart-border);
            background: var(--smart-background);
            border-top-width: 6px;
            box-sizing: border-box;
            display: flex;
            pointer-events: none;
        }

        .smart-docking-layout-snap .right > div,
        .smart-docking-layout-snap.layout-right {
            flex-direction: column;
        }

        .smart-docking-layout-snap .right > div,
        .smart-docking-layout-snap .bottom > div {
            align-items: flex-end;
        }

            .smart-docking-layout-snap .top > div div,
            .smart-docking-layout-snap .bottom > div div,
            .smart-docking-layout-snap .left > div div,
            .smart-docking-layout-snap .right > div div,
            .smart-docking-layout-snap .center > div div,
            .smart-docking-layout-snap.layout-top > div div,
            .smart-docking-layout-snap.layout-bottom > div div,
            .smart-docking-layout-snap.layout-left > div div,
            .smart-docking-layout-snap.layout-right > div div {
                width: 100%;
                height: 50%;
                background-color: var(--smart-primary);
            }

    .smart-docking-layout-snap .header {
        background-color: var(--smart-primary);
        position: absolute;
    }

    .smart-docking-layout-snap .center > div div {
        height: 100%;
    }

    .smart-docking-layout-snap .left > div div,
    .smart-docking-layout-snap .right > div div {
        width: 50%;
        height: 100%;
    }

    .smart-docking-layout-snap.layout-top.smart-hidden,
    .smart-docking-layout-snap.layout-bottom.smart-hidden,
    .smart-docking-layout-snap.layout-left.smart-hidden,
    .smart-docking-layout-snap.layout-right.smart-hidden {
        display: none;
    }

    .smart-docking-layout-snap.layout-top,
    .smart-docking-layout-snap.layout-bottom,
    .smart-docking-layout-snap.layout-left,
    .smart-docking-layout-snap.layout-right {
        position: absolute;
        width: 30px;
        height: 30px;
        overflow: hidden;
        opacity: 0.25;
    }

    .smart-docking-layout-snap.layout-top {
        left: 50%;
        transform: translateX(-50%);
        top: 5px;
    }

    .smart-docking-layout-snap.layout-bottom {
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5px;
    }

    .smart-docking-layout-snap.layout-left {
        top: 50%;
        transform: translateY(-50%);
        left: 5px;
    }

    .smart-docking-layout-snap.layout-right {
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 5px;
    }

        .smart-docking-layout-snap.layout-left > div,
        .smart-docking-layout-snap.layout-right > div {
            width: 50%;
            position: relative;
        }

            .smart-docking-layout-snap.layout-left > div:after,
            .smart-docking-layout-snap.layout-right > div:after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-left: none;
                border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border);
                border-top: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
                border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
                left: 155%;
                top: 50%;
                transform: translateY(-50%);
            }

            .smart-docking-layout-snap.layout-right > div:after {
                border-right: none;
                border-left: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border);
                border-top: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
                border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
                left: calc(-100% - 1px);
            }

    .smart-docking-layout-snap.layout-top > div,
    .smart-docking-layout-snap.layout-bottom > div {
        height: 50%;
        position: relative;
    }

        .smart-docking-layout-snap.layout-top > div:after,
        .smart-docking-layout-snap.layout-bottom > div:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
            border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
            border-top: none;
            border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border);
            left: 50%;
            top: 180%;
            transform: translateX(-50%);
        }

        .smart-docking-layout-snap.layout-bottom > div:after {
            border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
            border-left: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent;
            border-top: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border);
            border-bottom: none;
            left: 50%;
            top: -100%;
            transform: translate(-50%, -150%);
        }

    .smart-docking-layout-snap.layout-right,
    .smart-docking-layout-snap.layout-bottom {
        display: flex;
        align-items: flex-end;
    }

        .smart-docking-layout-snap.layout-left > div div,
        .smart-docking-layout-snap.layout-right > div div,
        .smart-docking-layout-snap.layout-top > div div,
        .smart-docking-layout-snap.layout-bottom > div div {
            height: 100%;
        }

.smart-docking-layout .smart-window-resize-feedback {
    border: 2.5px solid lightgray;
}

.smart-docking-layout-auto-hide-window,
.smart-docking-layout-auto-hide-window[ontop] {
    z-index: auto;
    z-index: initial;
}

.smart-docking-layout .smart-docking-layout-auto-hide-window.smart-window {
    position: absolute;
    box-shadow: none;
    border: 1px solid #A9A9A9;
    border-radius: 0;
    width: 200px;
    height: 200px;
    min-width: 100px;
    min-height: 100px;
}

.smart-docking-layout .smart-docking-layout-auto-hide-window:focus,
.smart-docking-layout .smart-docking-layout-auto-hide-window[focused] {
    box-shadow: none;
}

.smart-docking-layout-snap-highlighter,
.smart-docking-layout-snap-highlighter-header {
    background-color: var(--smart-primary);
    opacity: 0.5;
    position: absolute;
    pointer-events: none;
    z-index: 10001;
}

.smart-docking-layout-snap-highlighter-header {
    transform: none;
}

.smart-docking-layout-snap-highlighter[position="center"] {
    top: 0;
    left: 0;
}

.smart-docking-layout-snap-highlighter[position="center"],
.smart-docking-layout-snap-highlighter[position="header"] {
    width: 100%;
    height: 100%;
}

.smart-docking-layout-snap-highlighter[position="top"],
.smart-docking-layout-snap-highlighter[position="bottom"] {
    width: 100%;
    height: 50%;
    max-height: 50%;
}

.smart-docking-layout-snap-highlighter[position="top"],
.smart-docking-layout-snap-highlighter[position="layout-top"] {
    top: 0;
}

.smart-docking-layout-snap-highlighter[position="bottom"],
.smart-docking-layout-snap-highlighter[position="layout-bottom"] {
    bottom: 0;
}

.smart-docking-layout-snap-highlighter[position="left"],
.smart-docking-layout-snap-highlighter[position="right"] {
    width: 50%;
    max-width: 50%;
    height: 100%;
}

.smart-docking-layout-snap-highlighter[position="left"] {
    left: 0;
    top: 0;
}

.smart-docking-layout-snap-highlighter[position="right"] {
    right: 0;
    top: 0;
}

.smart-docking-layout-snap-highlighter[position="layout-top"],
.smart-docking-layout-snap-highlighter[position="layout-bottom"] {
    width: 100%;
    height: 10%;
    max-height: 50%;
}

.smart-docking-layout-snap-highlighter[position="layout-top"] {
    top: 0;
}

.smart-docking-layout-snap-highlighter[position="layout-bottom"] {
    bottom: 0;
}

.smart-docking-layout-snap-highlighter[position="layout-left"],
.smart-docking-layout-snap-highlighter[position="layout-right"] {
    width: 10%;
    max-width: 50%;
    height: 100%;
}

.smart-docking-layout-snap-highlighter[position="layout-left"] {
    left: 0;
    bottom: 0;
}

.smart-docking-layout-snap-highlighter[position="layout-right"] {
    right: 0;
    bottom: 0;
}