.fi-simple-layout {
    background-image: var(--filament-backgrounds-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;

    &::before {
        background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 25%) no-repeat;
        background-size: cover;
        content: var(--filament-backgrounds-attribution-backdrop);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }

    &::after {
        bottom: 2rem;
        color: white;
        content: var(--filament-backgrounds-attribution);
        left: 2rem;
        position: absolute;
        text-shadow: 0 0 3px black;
    }
}

.fi-simple-main {
    position: relative;
    --tw-ring-color: transparent;

    background-color: rgba(255, 255, 255, 0.8);

    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }

    &:where(.dark, .dark *) {
        background-color: rgb(24, 24, 27, 0.9);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-900) 90%, transparent);
        }
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        backdrop-filter: blur(3px);
    }
}