/*--------------------------------------------------------------
# Preview bar
--------------------------------------------------------------*/

.website-preview-bar {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    width: 100%;

    color: var(--text);
    background:
        color-mix(in srgb, var(--primary) 10%, white);

    border-bottom: 1px solid var(--border);
}

.website-preview-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    min-height: 42px;
    padding: .45rem 1rem;

    font-family: "DM Sans", sans-serif;
    font-size: .82rem;
}

.website-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .25rem .65rem;

    color: var(--text);
    background:
        color-mix(in srgb, var(--primary) 14%, transparent);

    border-radius: 999px;

    font-weight: 700;
}

.website-preview-text {
    color:
        color-mix(in srgb, var(--text) 72%, transparent);
}

body.is-preview {
    padding-top: 42px;
}

body.is-preview .site-header {
    top: 42px;
}

@media (max-width: 640px) {
    .website-preview-bar-content {
        justify-content: center;
    }

    .website-preview-text {
        display: none;
    }
}