.oc-video-player-loading,
.oc-video-player-error {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    margin: 1rem 0;
    padding: 2rem 1rem;
    border-radius: 6px;
    background: #f5f5f5;
    color: #666;
    text-align: center;
}

.oc-video-player-retry {
    display: block;
    margin: 0.75rem auto 0;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.oc-video-player-error {
    border: 1px solid #e0b4b4;
    background: #fff6f6;
    color: #9f3a38;
}

.oc-video-player-ready {
    width: var(--oc-video-natural-width, 100%);
    max-width: 100%;
    margin: 1rem auto;
}

.oc-video-player-ready > video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--oc-video-aspect-ratio, auto);
    object-fit: contain;
    background: #000;
}

.oc-video-player-ready > .video-js:not(.vjs-fullscreen) {
    width: 100%;
    max-width: 100%;
}

.oc-video-player-ready > .video-js:not(.vjs-fluid):not(.vjs-fullscreen) {
    height: auto;
    aspect-ratio: var(--oc-video-aspect-ratio, 16 / 9);
}

/* Fullscreen is intentionally allowed to grow beyond the inline natural size. */
.oc-video-player-ready > video:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}