/********** Main Window **********/

.suey-main-window {
    user-select: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.suey-window-holder {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}

/********** Abstract Dock **********/

.suey-dock {
    position: relative;
}

/********** Docker **********/

.suey-docker {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 8em;
    min-height: 8em;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

.suey-docker.suey-docker-primary {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: visible;
}

.suey-docker-vertical {
    height: 100%;
}

.suey-docker-horizontal {
    width: 100%;
}

.suey-dock-drag .suey-docker {
    pointer-events: all !important;
}

/***** Collapsed Docks */

.suey-docker.suey-collapsed {
    min-width: calc(var(--tab-size) * 1) !important;
    min-height: calc(var(--tab-size) * 1) !important;
}

.suey-collapsed .suey-corner-button {
    display: none !important;
}

.suey-collapsed > .suey-tabbed .suey-panel-simple,
.suey-collapsed > .suey-tabbed .suey-panel-fancy-outer,
.suey-collapsed > .suey-tabbed .suey-panel-fancy-border,
.suey-collapsed > .suey-tabbed .suey-panel-fancy-inside {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.suey-collapsed > .suey-tabbed .suey-tab-floaters * {
    opacity: 0 !important;
    user-select: none !important;
    pointer-events: none !important;
}

.suey-collapsed > .suey-tabbed .suey-tab-buttons.suey-left-side { top: 0; right: 0; left: auto; }
.suey-collapsed > .suey-tabbed .suey-tab-buttons.suey-right-side { top: 0; left: 0; right: auto; }
.suey-collapsed > .suey-tabbed .suey-tab-buttons.suey-top-side { left: 0; bottom: 0; top: auto; }
.suey-collapsed > .suey-tabbed .suey-tab-buttons.suey-bottom-side { left: 0; top: 0; bottom: auto; }
.suey-collapsed > .suey-tabbed .suey-tab-button {
    margin: 0 !important;
}

.suey-collapsed .suey-tabbed .suey-resizer {
    pointer-events: none !important;
    display: none !important;
}

/***** Dock Locations */

.suey-dock-locations {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.suey-dock-location {
    --size: 2em;
    position: absolute;
    opacity: 0.0;
}
.suey-dock-left   { left:  0; top:    0; width:  20%; height: 100%; }
.suey-dock-right  { right: 0; top:    0; width:  20%; height: 100%; }
.suey-dock-top    { left:  0; top:    0; width: 100%; height:  25%; }
.suey-dock-bottom { left:  0; bottom: 0; width: 100%; height:  25%; }
.suey-dock-center { left: 20%; top: 20%; width:  60%; height:  60%; }

.suey-dock-middle-vertical   { left: var(--size); top:   0; height: 100%; width:  calc(100% - (var(--size) * 2)); }
.suey-dock-middle-horizontal { left:   0; top: var(--size); width:  100%; height: calc(100% - (var(--size) * 2)); }
.suey-dock-split-left   { left:  0; top:    0; width:  var(--size); height: 100%; }
.suey-dock-split-right  { right: 0; top:    0; width:  var(--size); height: 100%; }
.suey-dock-split-top    { left:  0; top:    0; width: 100%; height:  var(--size); }
.suey-dock-split-bottom { left:  0; bottom: 0; width: 100%; height:  var(--size); }

.suey-dock-location.suey-dock-drop {
    background-color: transparent;
    opacity: 1.0;
}
.suey-dock-location.suey-dock-drop:not(.suey-dock-self)::before {
    --shrink: 0.57143em;
    content: '';
    position: absolute;
    left: var(--shrink);
    right: var(--shrink);
    top: var(--shrink);
    bottom: var(--shrink);
    background-color: rgba(var(--background-light), var(--panel-transparency));
    border: var(--border-small) solid rgb(var(--complement));
    border-radius: var(--radius-large);
    outline: var(--radius-large) solid rgba(var(--background-light), calc(var(--panel-transparency) * 0.5));
}

.suey-docker.suey-dock-self .suey-panel-simple,
.suey-docker.suey-dock-self .suey-panel-fancy-border {
    border: var(--border-small) solid rgb(var(--complement)) !important;
}

/********** Floater **********/

.suey-floater {
    display: flex; /* needed for scroll bars to appear on proper layer */
    flex-direction: column;
    pointer-events: auto;
    height: 100%;
    width: 100%;
    overflow: auto;
}

/********** Tabbed **********/

.suey-tabbed {
    pointer-events: all;
    max-height: 100%;
    padding: var(--pad-small);
}

/***** TabPanels */

/* Child of Tabbed that holds multiple 'Floater' */
.suey-tab-floaters {
    height: 100%;
    width: 100%;
    overflow: hidden;

    /* Need for scroll bars to appear on proper layer */
    display: flex;
    flex-direction: column;
}

/***** TabButtons */

/* Child of Tabbed that holds multiple 'TabButton' */
.suey-tab-buttons {
    pointer-events: none;
    position: absolute;
    display: flex;
    z-index: 101; /* Tabs */
    min-width: var(--tab-size);
    min-height: var(--tab-size);
    margin: 0;
}

.suey-dock-drag .suey-tab-buttons {
    pointer-events: all;
}

.suey-tab-buttons.suey-left-side,
.suey-tab-buttons.suey-right-side {
    flex-direction: column;
    top: 1em;
}

.suey-tab-buttons.suey-top-side,
.suey-tab-buttons.suey-bottom-side {
    flex-direction: row;
    left: 1em;
}

.suey-tab-buttons.suey-top-side { top: calc((var(--tab-size) / -2.0) + 0.52em); }
.suey-tab-buttons.suey-bottom-side { bottom: calc((var(--tab-size) / -2.0) + 0.52em); }

.suey-tab-buttons.suey-left-side { left: calc((var(--tab-size) / -2.0) + 0.52em); }
.suey-tab-buttons.suey-right-side { right: calc((var(--tab-size) / -2.0) + 0.52em); }

/***** TabButton *****/

.suey-tab-button {
    pointer-events: all;
    width: var(--tab-size);
    height: var(--tab-size);
    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(var(--text), 1.0);
    background-color: transparent;
    border: none;
    border-radius: var(--tab-size);
    outline: none;
    margin: var(--pad-x-small);
    transform: scale(70%);
    transition: margin var(--tab-timing) ease-in-out, transform var(--tab-timing) ease-in-out;
}

.suey-window .suey-tab-button {
    transition: 0s;
}

.suey-tab-buttons.suey-top-side .suey-tab-button:not(.suey-selected),
.suey-tab-buttons.suey-bottom-side .suey-tab-button:not(.suey-selected) {
    margin-left: calc(-1 * var(--pad-x-small));
    margin-right: calc(-1 * var(--pad-x-small));
}

.suey-tab-buttons.suey-left-side .suey-tab-button:not(.suey-selected),
.suey-tab-buttons.suey-right-side .suey-tab-button:not(.suey-selected) {
    margin-top: calc(-1 * var(--pad-x-small));
    margin-bottom: calc(-1 * var(--pad-x-small));
}

.suey-drag-tab-button {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.8;
    transform: scale(100%);
}
.suey-drag-tab-button .suey-tab-icon-border {
    border-width: var(--border-small);
}

:not(.suey-collapsed) > .suey-dock .suey-tab-button.suey-selected {
    color: rgba(var(--highlight), 1.0);
    margin-top: var(--pad-x-small);
    margin-bottom: var(--pad-x-small);
    transform: scale(100%);
}

/* Tab Image */
.suey-tab-button .suey-vector-box {
    position: absolute;
    border: none;
    border-radius: var(--tab-size);
    outline: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: contrast(75%) grayscale(100%) brightness(75%);
}

:not(.suey-collapsed) > .suey-dock .suey-tab-button.suey-selected .suey-vector-box {
    filter: none;
}

.suey-tab-button:hover .suey-vector-box,
.suey-tab-button:active .suey-vector-box {
    filter: brightness(120%) !important;
}

.suey-tab-button:active .suey-vector-box .suey-image {
    transform: translate(0, var(--pixel));
}

/* Tab Image Border / Shadow */
.suey-tab-icon-border {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    border: var(--pad-small) solid rgba(var(--icon));
    border-radius: calc(var(--tab-size) * 0.7);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.05);
}

.suey-tab-button.suey-drop-target .suey-tab-icon-border {
    border-color: rgba(var(--complement)) !important;
}

.suey-tab-button:hover .suey-tab-icon-border {
    box-shadow:
        inset 0 var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.50),
        inset 0 var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.35);
}

.suey-tab-button:active .suey-tab-icon-border {
    box-shadow:
        inset 0 var(--pixel) var(--pixel) var(--pixel) rgba(var(--black), 0.35);
}

:not(.suey-collapsed) > .suey-tabbed .suey-tab-button.suey-selected .suey-tab-icon-border {
    border: 0.15em solid rgb(var(--icon));
}

/********** Window **********/

.suey-window {
    --window-z-index: 200;

    position: absolute;
    padding: var(--pad-small);
    opacity: calc(90% + (10% * var(--panel-transparency)));
    z-index: var(--window-z-index); /* Window */
}

.suey-window.suey-drop-target .suey-panel-simple,
.suey-window.suey-drop-target .suey-panel-fancy-border {
    border: var(--border-small) solid rgb(var(--complement)) !important;
}

.suey-window:not(.suey-active-window) div::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(to left, rgba(var(--button-light), 1), rgba(var(--button-dark), 1));
    border-radius: calc(var(--scroll-size) / 2.0);
}
.suey-window:not(.suey-active-window) div::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(to bottom, rgba(var(--button-light), 1), rgba(var(--button-dark), 1));
    border-radius: calc(var(--scroll-size) / 2.0);
}

.suey-panel-button.suey-title-bar {
    --title-width: 0;
    color: rgba(var(--highlight), 0.5);
    border: var(--border-small) solid rgb(var(--button-light));
    border-radius: var(--radius-large);
    background-color: rgba(var(--background-dark), 1.0);
    background-image: linear-gradient(to bottom, rgba(var(--background-light), 0.5), rgba(var(--background-dark), 0.5));
    box-shadow: none;
    text-shadow: none;
    text-align: center;
    left: 0;
    right: 0;
    min-width: 6em;
    min-height: 1.6em;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.suey-active-window .suey-panel-button.suey-title-bar {
    color: rgba(var(--highlight), 1);
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.5), rgba(var(--icon), 0.5));
    border: var(--border-small) solid rgb(var(--icon));
    text-shadow: var(--minus) var(--pixel) rgba(var(--shadow), 0.5);
}

/* Window Tab Buttons */

.suey-tab-buttons.suey-window-side {
    flex-direction: row;
    top: calc((var(--tab-size) / -2.0) + 0.4em);
}
.suey-tab-buttons.suey-window-side .suey-tab-icon-border {
    border: var(--border-small) solid rgba(var(--icon));
}
.suey-window-moving .suey-tab-buttons.suey-window-side {
    transition: transform 0.15s;
}
.suey-window-moving .suey-tab-buttons.suey-window-side .suey-tab-icon-border {
    transition: border 0.15s;
}

.suey-shrink-tab-button .suey-tab-buttons.suey-window-side {
    top: calc((var(--tab-size) / -2.0) + 0.5em); /* 42857em);*/
    transform: scale(65%);
}
.suey-shrink-tab-button .suey-tab-buttons.suey-window-side .suey-tab-icon-border {
    border: 0.24em solid rgba(var(--icon));
}

.suey-panel-button.suey-title-bar .suey-tab-buttons {
    left: 110%;
    margin-left: 0.5em;
}

.suey-window:not(.suey-active-window) .suey-tab-icon-border {
    border-color: rgba(var(--button-light)) !important;
}

/* Window Floaters */
.suey-window .suey-panel-fancy-outer,
.suey-window .suey-panel-fancy-border,
.suey-window .suey-panel-fancy-inside,
.suey-window .suey-tab-floaters,
.suey-window .suey-floater,
.suey-window .suey-titled {
    overflow: visible;
}

.suey-window .suey-floater {
    z-index: 101; /* window floater */
}

.suey-window .suey-tab-floaters {
    margin-top: 1em;
    height: calc(100% - 1em);
}

/* Window Tab Title Buttons */
.suey-window .suey-tab-title {
    pointer-events: none;
    position: absolute;
    top: -1.8em;
    left: 0;
    right: 0;
    width: 75%;
    margin: auto;
    min-height: 1.9em;
    background: transparent;
    background-image: none;
    box-shadow: none;
    outline: none;
    color: transparent;
    text-shadow: none;
    overflow: visible;
}
.suey-window .suey-tab-title .suey-borderless-button {
    pointer-events: all;
    position: relative;
    pointer-events: all;
    background: rgb(var(--button-dark)) !important;
    border: solid var(--border-small) rgb(var(--icon));
    overflow: visible;
}
.suey-window:not(.suey-active-window) .suey-tab-title .suey-borderless-button {
    border: solid var(--border-small) rgb(var(--button-light));
}