@layer components {
    .site-shell--with-alerts {
        @apply relative;
    }

    .site-alert-layer {
        @apply pointer-events-none absolute left-0 right-0 top-24 z-40;
    }

    .site-alert-layer__inner {
        @apply mx-auto w-full max-w-[1170px] px-4 md:px-8;
    }

    .site-alert-layer .alert,
    .site-alert-layer .flash-message {
        @apply pointer-events-auto relative mx-auto max-w-5xl pr-12;
    }

    .site-alert-layer .alert .close,
    .site-alert-layer .flash-message .close,
    .site-alert-layer .alert [data-dismiss="alert"],
    .site-alert-layer .flash-message [data-dismiss="alert"],
    .site-alert-layer .alert [data-alert-dismiss],
    .site-alert-layer .flash-message [data-alert-dismiss] {
        @apply absolute right-4 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-lg font-semibold text-base-content/60 transition hover:bg-base-200 hover:text-base-content focus:outline-none focus:ring-2 focus:ring-primary/20;
    }
}
