/*
 * Styling the TopLevel widget
 */
.toplevel-widget {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 2px;
    border: 1px solid #000000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    background-color: #FFFFFF;
    isolation: isolate;
}

/* Title bar */
.toplevel-title-bar {
    background-color: #C3C3C3;
    padding: 2px;
    cursor: move;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    user-select: none;
    /* Anchor for the absolutely-positioned, centered title text. */
    position: relative;
}

.toplevel-title-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-left: 4px;
    margin-right: 2px;
    flex-shrink: 0;
}

.toplevel-title-text {
    /* Centered in the title bar regardless of icon / button widths. */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Stay clear of side elements when the title is long. */
    max-width: 60%;
    /* Don't intercept clicks: the title bar handles drag/dblclick/etc. */
    pointer-events: none;
}

/* Corner resize grips */
.toplevel-grip {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity 0.15s;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.toplevel-widget:hover .toplevel-grip {
    opacity: 0.7;
}

.toplevel-grip:hover {
    opacity: 1 !important;
}

.toplevel-grip-se {
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent #999 transparent;
}

.toplevel-grip-sw {
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 16px 0 0 16px;
    border-color: transparent transparent transparent #999;
}

.toplevel-grip-ne {
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #999 transparent transparent;
}

.toplevel-grip-nw {
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent transparent #999;
}

.toplevel-grip-se:hover { border-bottom-color: #777; }
.toplevel-grip-sw:hover { border-left-color: #777; }
.toplevel-grip-ne:hover { border-right-color: #777; }
.toplevel-grip-nw:hover { border-left-color: #777; }