/* Photo Cast — only the styles MudBlazor does not already provide. */

.photo-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Scales with the viewport so the preview fits on a phone and fills a desktop. */
    height: min(60vh, 560px);
    min-height: 220px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

/* contain keeps the aspect ratio at every viewport size; the photo is never stretched. */
.photo-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
}

/* Blazor's built-in error banner. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 0.75rem 1.25rem;
    background: #ffd9d9;
    color: #3d0000;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}