.block-alert-bar{
    @apply mb-xs;
    &__inner{
        @apply bg-blue text-white min-h-[60px] flex items-center py-2;
        > div{
            @apply block-container font-bold;
            button{
                @apply block md:inline-block font-normal md:ml-4 lg:ml-7;
            }
        }
    }
    &-modal{
        @apply hidden;
        &__overlay{
            animation: alertModalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
            @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-50 flex items-center justify-center;
        }
        &__inner{
            transition: opacity .3s ease;
            @apply relative w-full max-w-xl bg-blue p-[calc(var(--grid-gutter)*2)] pr-lg;
            > *{
                @apply text-white;
                &:last-child{
                    @apply mb-0;
                }
            }
        }
        &__close{
            background-image: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.8607 12.8432L12.8399 24.8641L12.1328 24.157L24.1536 12.1361L24.8607 12.8432Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8425 12.1368L24.8634 24.1576L24.1562 24.8647L12.1354 12.8439L12.8425 12.1368Z' fill='%23fff'/%3E%3C/svg%3E");
            @apply absolute w-12.5 h-12.5 right-0 top-0 bg-contain;
        }
        &.is-active{
            @apply block;
        }
        &[aria-hidden="false"]{
            .block-alert-bar-modal__overlay{
                animation: alertModalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
            }
        }
    }
}

@keyframes alertModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes alertModalFadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}