.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; } }