body {
    background-color: black;
}

html {
    &.resizing-on .mm-viewport {
        opacity: 1;
    }
}

.mm-viewport {
    position: absolute;
    /*top: 50px;*/
    bottom: 50px;
    right: 50px;
    /*right: 50%;*/
    padding: 0.5rem 0.6rem;
    opacity: 0;
    font-size: 1.2rem;
    font-family: sans-serif;
    /*font-family: "Open Sans", "Segoe UI", sans-serif;*/
    background-color: rgba(255, 255, 255, 0.8);
    transition: opacity 1s;
    border-radius: 4px;
    min-width: 200px;
    --base-opacity: 0;

    .viewport-info {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: bold;
        margin-top: 0.3rem;
        margin-bottom: 0.1rem;
        color: #333;
    }

    .section-title:first-child {
        margin-top: 0;
    }

    .size-info,
    .ratio-info,
    .image-size,
    .image-ratio-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        margin-left: 0.5rem;
    }

    .size-value,
    .ratio-value {
        font-weight: bold;
        margin-left: 0.5rem;
    }

    .w,
    .h {
        display: inline;
    }

    .ratio-warning {
        color: #d63031;
        font-weight: bold;
        font-size: 0.9rem;
        text-align: center;
        margin-top: 0.3rem;
        padding: 0.2rem;
        background-color: rgba(255, 239, 239, 0.9);
        border-radius: 3px;
        border: 1px solid #d63031;
    }

    &.ratio-mismatch {
        background-color: rgba(255, 239, 239, 0.9);
        border: 2px solid #d63031;
    }

    &:hover {
        opacity: 1;
    }

    /* Custom opacity control when enabled */
    &.always-visible {
        opacity: var(--base-opacity);
    }

    /* Full opacity on hover when enabled */
    &.always-visible:hover {
        opacity: 1;
    }
}