@keyframes status-bar-loading {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

html {
    overflow: hidden;

    & body {
        margin: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;

        .preview-bar {
            --hue: 180;

            position: relative;
            display: grid;
            grid-template-areas: "status-text logo" "status-bar status-bar";
            color: hsl(var(--hue), 50%, 99.5%);
            background: repeating-linear-gradient(30deg, hsl(var(--hue), 50%, 5%), hsl(var(--hue), 50%, 20%));
        

            .status-text {
                grid-area: status-text;
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 20px;
                font-family: "Didact Gothic", sans-serif;
                font-size: 15px;

                &:before {
                    flex: 0 0 20px;
                    content: "";
                    position: relative;
                    display: block;
                    width: 20px;
                    height: 20px;
                    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 148'> <path d='M108,92l-3,3-15-15c6.28-8.36,10-18.74,10-30C100,22.39,77.61,0,50,0S0,22.39,0,50s22.39,50,50,50c11.26,0,21.64-3.72,30-10l15,15-3,3,40,40,16-16-40-40ZM50,90c-22.09,0-40-17.91-40-40S27.91,10,50,10s40,17.91,40,40-17.91,40-40,40Z' style='fill: white;'/></svg>"); -webkit-mask-repeat: no-repeat;
                    -webkit-mask-size: contain;
                    background-color: hsl(var(--hue), 25%, 50%);
                }
            }

            .status-bar {
                grid-area: status-bar;
                height: 4px;
                background: hsl(var(--hue), 50%, 50%);
                box-shadow: 0 0 10px 0 hsl(var(--hue), 50%, 50%);
            }

            .logo {
                grid-area: logo;
                align-self: center;
                justify-self: end;
                margin: 0 20px;
                -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2223.52 309.88'> <path d='M2125.92,265.35c-82.52,0-141.2-46.93-141.2-110.41,0-59.9,57.52-112.19,145.26-112.19,31.59,0,57.72,6.79,83.39,17.59V16.5c-21.26-6.47-50.21-11.29-84-11.29-122,0-202.22,67.94-202.22,153.32s70.31,148.4,189.44,148.4c36.65.14,72.98-6.9,106.93-20.7l-15.8-35.88c-26.16,9.83-53.86,14.91-81.8,15Z' style='fill: white;'/> <path d='M1071.16,304.78V8.87h51.72v295.91h-51.72Z' style='fill: white;'/> <path d='M1508.16,51.24h-133.76v253.54h-52.3V51.23h-134.18s.16-42,42.62-42h277.62v42.01Z' style='fill: white;'/> <path d='M843.64,304.86h-42.54L650.27,8.96h57.79l116.47,227.92c8.62-15.55,104.78-192.62,109.73-201.24,21.25-37,71.41-26.69,71.41-26.69l-162.03,295.91Z' style='fill: white;'/> <path d='M1606.5,91.52c15.24-29.95,54.31-52.69,102-52.69,64,0,111.17,42.19,111.17,83.51h-142.4c-.73,0-41.27,1.25-41.27,41.05h237.48v-10.64c0-92-57.51-152.75-165.88-152.75-101.26,0-169.54,63.85-169.54,149.62s63,160.26,194.41,160.26c48.85,0,98.51-13.32,128.71-30.84l-17.12-34.9c-24.87,11.27-62.61,22.63-98.14,23.08-72.65.93-126.18-31.72-141.92-74.63-5.91-12.91-21.65-55.51,2.5-101.07Z' style='fill: white;'/> <path d='M249.78,43.22c11.97-11.96,24.37-23.34,37.21-34.14h-99.08C56.78,14.35,82.97,123.93,89.07,144.52c.34,1.1.7,2.2,1,3.3h0c5.03,15.79,10.79,31.38,17.29,46.76,5.22,12.35,10.87,24.45,16.95,36.3.59-1.43,1.18-2.86,1.78-4.28,28.97-68.56,70.98-130.83,123.69-183.38Z' style='fill: white;'/> <path d='M364.69,9.16c-12.39,7.09-24.27,15.05-35.53,23.82-4.28,3.37-8.51,6.82-12.69,10.33-1.27,1.09-2,1.71-2,1.71l.3-.33c-11.41,9.65-22.44,19.8-33.11,30.47-48.58,48.44-87.3,105.86-114,169.06-5.16,12.2-9.85,24.53-14.06,37-2.72,8.07-5.24,16.18-7.56,24.35h104.31c114.47,0,114.35-113.56,114.35-113.56V9.16h0Z' style='fill: white;'/> <path d='M104.29,287.59c-14.62-24.17-27.47-49.37-38.47-75.39-13.62-32.18-24.33-65.52-32-99.61C-26.51,244.66-4.69,305.48,87.82,305.59h27.79c-3.88-5.93-7.65-11.93-11.32-18Z' style='fill: white;'/></svg>");
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                -webkit-mask-position: center;
                background-color: hsl(var(--hue), 50%, 99.5%);
                width: 80px;
                height: 100%;
            }

            &.loading {
                .status-bar {
                    background: repeating-linear-gradient(-45deg, hsl(var(--hue), 50%, 50%), hsl(var(--hue), 50%, 50%) 10px, hsl(var(--hue), 50%, 40%) 10px, hsl(var(--hue), 50%, 40%) 20px);
                    animation: status-bar-loading .25s linear infinite;
                }
            }

            &.error {
                --hue: 0;
            }

            &.done {
                --hue: 110;
            }

            @media (max-width: 430px) {
                grid-template-areas: "logo" "status-text" "status-bar";

                .status-text {
                    justify-self: center;
                    margin: 15px;
                    font-size: 13px;

                    &:before {
                        flex: 0 0 15px;
                        width: 15px;
                        height: 15px;
                    }
                }

                .logo {
                    justify-self: center;
                    margin: 15px 15px 0 15px;
                    height: 10px;
                }
            }
        }

        & iframe {
            flex-grow: 1;
        }
    }
}