/* =========================================================
   SAFE — INSPECT
   ========================================================= */

.safe-capability[data-capability="inspect"] {
    position: relative;

    width: 120px;
    height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;
    background: transparent;

    cursor: pointer;

    transition:
        transform 150ms ease,
        opacity 150ms ease;
}

.safe-capability[data-capability="inspect"]::before {
    content: "";

    width: 42px;
    height: 42px;

    border: 1px solid currentColor;
    border-radius: 50%;

    transition:
        transform 150ms ease;
}

.safe-capability[data-capability="inspect"]:hover {
    transform: translateY(-3px);
}

.safe-capability[data-capability="inspect"]:active {
    transform: translateY(2px) scale(0.96);
}

.safe-capability[data-capability="inspect"]:active::before {
    transform: scale(1.12);
}