/********** Property List **********/

.suey-property-list {
    width: 100%;
}

/***** Property Header */

.suey-property-header-title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: calc(var(--row-height));
    overflow: hidden;

    cursor: default;
    background-color: rgba(var(--icon), 0.1); /* transparent; */
    border-top: solid var(--border-small) rgba(var(--shadow), 0.25);
    border-bottom: solid var(--border-small) rgba(var(--shadow), 0.25);
    text-shadow: var(--minus) var(--pixel) rgba(var(--shadow), 0.5);
    margin: var(--pad-micro) 0;
    padding: 0;
    padding-left: 0.425em;
    padding-top: var(--pad-micro);
    padding-bottom: var(--pad-micro);
}

.suey-shrinkable.suey-borderless-panel .suey-property-header-title {
    border-radius: var(--radius-small);
}

.suey-property-header-icon > * {
    filter: var(--drop-shadow);
}

.suey-property-header-icon {
    flex-grow: 0;
    flex-shrink: 0;

    position: relative;
    display: flex;
    margin: 0.15em;
    height: calc(var(--arrow-size) * 3.5);
    min-height: calc(var(--arrow-size) * 3.5);
    width: calc(var(--arrow-size) * 3.5);
    min-width: calc(var(--arrow-size) * 3.5);
}

.suey-property-header-text {
    flex-grow: 1;
    flex-shrink: 2;
    color: rgba(var(--text-light), 1.0);
    font-size: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.25em;
}

/***** Property Row */

.suey-property-row {
    position: relative;
    min-height: var(--row-height);
}

.suey-property-row:hover .suey-property-left {
    color: rgba(var(--highlight), 0.8);
}

.suey-property-row:hover .suey-property-left .suey-image {
    filter: brightness(250%);
}

.suey-property-space {
    flex: 0 0 auto;
    min-width: 0.2em;
}

.suey-property-left {
    --left-property-width: 50%;

    width: var(--left-property-width) !important;

    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding-left: var(--pad-medium);
    height: 100%;
    min-height: var(--row-height);
    text-align: left;
    text-transform: capitalize;
}
.suey-left-tab-spacing {
    padding-left: 0.85em;
}

.suey-property-right {
    --right-property-width: 50%;

    width: calc(var(--right-property-width) - var(--pad-small)) !important;

    flex-shrink: 0;
    margin: auto;
    margin-right: var(--pad-small) !important;
    justify-content: left;
    text-align: left;
    height: 100%;
    min-height: var(--row-height);
}

.suey-property-full {
    margin: auto;
    margin-right: var(--pad-small) !important;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: var(--row-height);
    width: calc(100% - var(--pad-small)) !important;
}

.suey-property-full > *:not(.suey-property-space) {
    flex: 1 1 auto;
    min-height: var(--row-height);
    min-width: 0;
    margin: auto;
    height: 100%;
}

/***** Right side of Property Row */

.suey-property-right .suey-number:not(.suey-property-tiny-row),
.suey-property-right > *:not(.suey-property-tiny-row):not(.suey-property-button):not(.suey-property-space) {
    flex: 1 1 auto;
    min-height: var(--row-height);
    min-width: 0;
    margin: auto;
    text-align: left;
    height: 100%;
}

.suey-property-right > .suey-button:not(.suey-property-tiny-row):not(.suey-property-button):not(.suey-menu-button) {
    text-align: center;
}

/* Right side of Property Box flex fill when using multiple controls */
.suey-property-tiny-row {
    --min-width: 2em;

    flex: 2 2 var(--min-width);
    min-height: var(--row-height);
    min-width: var(--min-width);
    height: 100%;
}

/***** Property Button */

/* Button appearing in right column of Property List, fixed size */
.suey-property-button {
    position: relative;
    min-height: var(--row-height);
    min-width: 2.1em;
}

/* Button appearing in right column of Property List, flex box */
.suey-property-button-flex {
    flex: 1 1 auto;
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0 0.05em;
    padding: 0 0.1em;
    height: var(--row-height);
    white-space: nowrap;
}

/********** Tree List **********/

.suey-tree-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    overflow: hidden;
    margin: var(--pad-small);

    color: rgba(var(--text), 1.0);
    background-color: rgba(var(--background-dark), 0.25);
    border: 0;
    border-radius: var(--radius-small);
    outline: solid var(--border-small) rgba(var(--shadow), 0.35);
    box-shadow: inset 0 0 var(--pad-small) 0 rgba(var(--midlight), 0.5); /* inner-glow */

    cursor: default;
}

/********** Tree List Option **********/

.suey-tree-list .suey-option {
    position: relative;
    text-align: left;
    border: var(--border-small) solid transparent;
    padding: var(--pad-x-small);
    width: 100%;
    white-space: nowrap;
}
.suey-tree-list .suey-option:hover:not(.suey-no-select) {
    color: rgba(var(--text-light), 1.0);
    background-color: rgba(var(--background-dark), 0.2);
}

.suey-tree-list .suey-option.suey-active:not(.suey-no-select) {
    color: rgba(var(--highlight), 1.0);
    background-color: rgba(var(--icon-light), 0.4);
    border-top: var(--border-small) solid rgba(var(--shadow), 0.25);
    border-bottom: var(--border-small) solid rgba(var(--shadow), 0.25);
    border-radius: var(--radius-small);
}
.suey-tree-list .suey-option.suey-active-top:not(.suey-no-select) {
    border-bottom: var(--border-small) solid transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.suey-tree-list .suey-option.suey-active-bottom:not(.suey-no-select) {
    border-top: var(--border-small) solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.suey-tree-list .suey-option.suey-drag:not(.suey-active) {
    border: var(--border-small) solid rgba(var(--icon-light), 1.0);
    border-radius: var(--radius-small);
}
.suey-tree-list .suey-option.suey-drag-top:not(.suey-active) {
    border-top: var(--border-small) solid rgba(var(--icon-light), 1.0);
}
.suey-tree-list .suey-option.suey-drag-bottom:not(.suey-active) {
    border-bottom: var(--border-small) solid rgba(var(--icon-light), 1.0);
}

/********** Tree List Opener **********/

.suey-tree-list .suey-opener {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.25em;

    vertical-align: top;
    text-align: center;
}

.suey-tree-list .suey-opener.suey-is-open:after {
    content: '-';
}

.suey-tree-list .suey-opener.suey-is-closed:after {
    content: '+';
}

/********** Drag Image **********/

.suey-drag-image {
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: var(--radius-small);
    z-index: 100000; /* Drag Clone */
}