/********** Panel Button **********/

.suey-panel-button {
    pointer-events: all;
    border: var(--border-small) solid rgb(var(--icon));
    outline: solid var(--border-small) rgba(var(--shadow), 0.2);
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.1);
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    filter: none;
    z-index: 1001; /* Panel Button */
}

.suey-panel-button:hover {
    opacity: 1.0;
    filter: brightness(125%);
    transition: opacity 0.1s;
}

.suey-panel-button:active {
    box-shadow: inset 0 var(--pad-micro) var(--pad-x-small) 0 rgba(var(--shadow), 0.75); /* sunk-in-shadow */
    filter: brightness(100%);
}

/********** Corner Buttons **********/

.suey-corner-button {
    cursor: pointer;
    border-radius: 50%;
    outline: none;
    opacity: 0;
    overflow: visible;
    transition: background-color 0.1s, opacity 0.25s ease-in-out;
}

/* Enlarge button click area */
.suey-corner-button:before {
    position: absolute;
    content: '';
    top: -0.25em;
    right: -0.25em;
    left: -0.25em;
    bottom: -0.25em;
    outline: none;
}

.suey-corner-button.suey-item-shown {
    opacity: 1.0;
    filter: brightness(100%);
    transition: opacity 0.1s;
}

.suey-corner-button.suey-item-hidden {
    opacity: 0;
    transition: opacity 0.1s;
}

.suey-corner-image {
    outline: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.suey-corner-button:hover .suey-corner-image {
    opacity: 1.0;
}

/********** Resizeable **********/

.suey-resizer {
    --height: 100%;
    --width: 100%;
    --offset: 0em;
    position: absolute;
    pointer-events: all;
    margin: 0;
    opacity: 0;                             /* NOTE: Change to > 0.0 to see 'Resizers' */
    z-index: 0; /* Resizer */
}

.suey-resizer-left {
    background-color: rgb(255, 0, 0);
    width: var(--resize-size);
    height: calc(var(--height) - (var(--offset) * 2));
    left: 0;
    top: 0;
    margin-left: var(--offset);
    margin-top: var(--offset);
    cursor: col-resize;
}

.suey-resizer-right {
    background-color: rgb(0, 0, 255);
    width: var(--resize-size);
    height: calc(var(--height) - (var(--offset) * 2));
    right: 0;
    top: 0;
    margin-right: var(--offset);
    margin-top: var(--offset);
    cursor: col-resize;
}

.suey-resizer-top {
    background-color: rgb(0, 255, 0);
    width: calc(var(--width) - (var(--offset) * 2));
    height: var(--resize-size);
    left: 0;
    top: 0;
    margin-left: var(--offset);
    margin-top: var(--offset);
    cursor: row-resize;
}

.suey-resizer-bottom {
    background-color: rgb(255, 255, 255);
    width: calc(var(--width) - (var(--offset) * 2));
    height: var(--resize-size);
    left: 0;
    bottom: 0;
    margin-left: var(--offset);
    margin-bottom: var(--offset);
    cursor: row-resize;
}

.suey-resizer-top-left {
    background-color: rgb(255, 255, 0);
    width: var(--resize-size);
    height: var(--resize-size);
    left: 0;
    top: 0;
    margin-left: var(--offset);
    margin-top: var(--offset);
    cursor: nwse-resize;
    z-index: 100; /* Resizer Corner */
}

.suey-resizer-top-right {
    background-color: rgb(0, 255, 255);
    width: var(--resize-size);
    height: var(--resize-size);
    right: 0;
    top: 0;
    margin-right: var(--offset);
    margin-top: var(--offset);
    cursor: nesw-resize;
    z-index: 100; /* Resizer Corner */
}

.suey-resizer-bottom-right {
    background-color: rgb(255, 0, 255);
    width: var(--resize-size);
    height: var(--resize-size);
    right: 0;
    bottom: 0;
    margin-right: var(--offset);
    margin-bottom: var(--offset);
    cursor: nwse-resize;
    z-index: 100; /* Resizer Corner */
}

.suey-resizer-bottom-left {
    background-color: rgb(0, 0, 0);
    width: var(--resize-size);
    height: var(--resize-size);
    left: 0;
    bottom: 0;
    margin-left: var(--offset);
    margin-bottom: var(--offset);
    cursor: nesw-resize;
    z-index: 100; /* Resizer Corner */
}