.cookie-banner {
    position: fixed;
    bottom: $spacer / 2;
    z-index: 10;
    background: rgba($brand-main-blue-dark, .6);
    backdrop-filter: saturate(150%) blur(10px);
    font-size: $font-size-sm;
    padding: $spacer / 2 $spacer;
    text-align: center;
    max-width: 36rem;
    border-radius: $border-radius;
    transition: opacity .6s ease-out;
    opacity: 0;
    transition-delay: 3s;

    .wf-active &,
    .wf-inactive & {
        opacity: 1;
    }

    p {
        margin-bottom: $spacer / 2;

        &:first-child {
            opacity: .8;
        }
    }

    @media ($screen-sm) {
        left: 50%;
        margin-left: -18rem;
        text-align: left;
        justify-content: space-between;
        align-items: center;

        p {
            margin: 0;

            &:first-child {
                flex: 0 0 75%;
            }

            &:last-child {
                flex: 0 0 22%;
                text-align: right;
            }
        }

        .btn {
            &:last-child {
                padding-right: 0;
            }
        }

        &[style='display: block;'] { // work around plugin style injection
            display: flex !important; // stylelint-disable-line declaration-no-important
        }
    }
}