// MODEL TUNER — a dev panel, so it reads as one.
//
// ⚠️ MODELLED ON SightEditor.razor.scss, NOT SHARING IT. Razor components scope their own styles
// and a shared sheet would make either tuner's tweak silently change the other — the argument every
// other tuner in this project makes about its copy.
//
// ⛔ TOP LEFT AND NARROW. The thing being judged is a boss standing in front of the player, in the
// middle of the screen: a panel wide enough to be comfortable is a panel covering the only feedback
// the sliders have.

.mtune {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: Inter;

    &.hidden {
        opacity: 0;
        pointer-events: none;
    }
}

.panel {
    position: absolute;
    left: 30px;
    top: 24px;
    flex-direction: column;
    width: 330px;
    max-height: 92%;
    overflow-y: scroll;
    background-color: rgba(8, 10, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    padding: 14px 16px 16px;

    // The root is pointer-events:none so the game keeps the mouse everywhere else; the panel has to
    // take its own clicks or no slider on it can be dragged.
    pointer-events: all;
}

.head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.92);
}

.close {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;

    &:hover { color: rgba(255, 255, 255, 0.95); }
}

.state {
    font-size: 11px;
    color: rgba(150, 220, 170, 0.85);
    margin-bottom: 10px;
    padding: 5px 7px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 3px;

    &.bad {
        color: rgba(255, 170, 120, 0.95);
        background-color: rgba(200, 80, 30, 0.16);
    }
}

// ⛔ THE SPEED WARNING IS NOT A HINT. Resizing a model without resizing its ground speeds is a
// skate, and a skate looks like an animation bug rather than a number that was left behind.
.warn {
    font-size: 11px;
    color: rgba(255, 200, 120, 0.95);
    background-color: rgba(200, 130, 30, 0.14);
    border-radius: 3px;
    padding: 6px 7px;
    margin-top: 8px;
}

.group {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.40);
    margin: 11px 0 5px;
}

.row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 3px;
}

.label {
    width: 42px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.s {
    flex-grow: 1;
    margin-right: 8px;
}

.num {
    width: 52px;
    font-family: Consolas;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.out {
    margin-top: 9px;
    padding: 6px 7px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    font-family: Consolas;
    font-size: 10px;
    color: rgba(190, 220, 255, 0.85);
    word-break: break-all;
}

.buttons {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 9px;
}

.btn {
    flex-direction: row;
    align-items: center;
    padding: 5px 9px;
    margin: 0 5px 5px 0;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80);
    cursor: pointer;

    &:hover { border-color: rgba(255, 255, 255, 0.45); }

    small {
        margin-left: 5px;
        font-size: 9.5px;
        color: rgba(255, 255, 255, 0.40);
    }

    &.on {
        background-color: rgba(255, 150, 40, 0.22);
        border-color: rgba(255, 150, 40, 0.55);
        color: rgba(255, 255, 255, 0.97);

        small { color: rgba(255, 255, 255, 0.70); }
    }

    &.copy {
        background-color: rgba(60, 180, 110, 0.20);
        border-color: rgba(60, 180, 110, 0.50);
    }
}