@mixin alert() {
    //note: all the icons svgs are available in the images!
    position: relative;
    @include flex();
    @include justify-content-center();
    @include align-items-center();
    width: 100%;
    padding: 16px;
    background-color: color('feedback');
    will-change: background-color;
    font-size: em(15px);
    line-height: 18px;
    @include font("IntervalNextBook");
    color: color('feedback', 'text');

    &--success {
        background-color: color('feedback', 'success-light');
        //with fixed please use background-color: color('feedback', 'success-light-translucent');
    }

    &--warning {
        background-color: color('feedback', 'warning');
        //with fixed please use background-color: color('feedback', 'warning-translucent');
    }

    &--error {
        background-color: color('feedback', 'error');
        //with fixed please use background-color: color('feedback', 'error-translucent');
    }

    &--fixed {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 3;
        margin-top: 0;
        @include backface-hack();
    }

    svg {
        width: 25px;
        height: 25px;
        margin-right: 32px;
        fill: color('feedback', 'text');
    }

    a,
    a:hover {
        color: color('feedback', 'text');
        text-decoration: underline;
    }

    &__wrapper {
        max-width: 1000px;
        width: auto;
    }

    &__title {
        font-size: em(16px);
        @include font("IntervalNextReg");
        color: color('feedback', 'text');
    }

    &__content {
        line-height: 18px;
    }

    &__close {
        @include flex();
        @include align-items-center();
        width: 44px;
        height: 80%;
        position: absolute;
        right: 16px;
        top: 10%;
        cursor: pointer;
        background: url("../images/cross.svg") center/14px no-repeat;

        svg {
            width: 14px;
            height: 14px;
            margin: 0 auto;
        }
    }
}

@mixin pill() {
    height: 22px;
    padding: 6px 16px 0 16px;
    border-radius: 22px;
    font-size: em(12px);
    text-transform: uppercase;
    text-align: center;
    line-height: 10px;
    color: color('pill', 'text');

    &--success {
        background-color: color('pill', 'success');
    }
    &--warning {
        background-color: color('pill', 'warning');
    }
    &--error {
        background-color: color('pill', 'error');
    }
    &--info {
        background-color: color('pill', 'info');
    }
}

@mixin banner() {
    @include backface-hack();
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    min-height: 60px;
    padding: 15px 20px;
    background-color: color('cookie-alert', 'background');

    &,
    &__wrapper {
        @include flex();
        @include align-items-center();
        @include justify-content-center();
    }

    &__wrapper {
        @include limited-full-width();

        a,
        p,
        img,
        svg {
            display: inline;
        }

        svg {
            margin-right: 10px;

            @include breakpoint(small) {
                display: none;
            }
        }

        a {
            position: relative;
            color: color('text', 'subheading');
            border-bottom: 1px solid color('text', 'subheading');
            text-decoration: none;

            &:hover {
                text-decoration: none;
                cursor: pointer;
            }
        }

        @include breakpoint(small) {
            @include flex-column();
        }
    }

    &__message {
        margin-right: auto;
        font-size: em(15px);
        line-height: 16px;
        color: color('text', 'subheading');

        @include breakpoint(small) {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            font-size: em(12px);
        }
    }

    &__button {
        @include button();
        position: relative;
        min-width: 70px;
        height: 34px;
        padding: 8px;
        margin-left: 20px;
        background-color: color("text", "subheading");
        border: 0;
        outline: none;

        @include font("IntervalNextMed");
        font-size: em(14px);
        color: color("primary", "highlight");

        &:hover {
            cursor: pointer;
        }

        @include breakpoint(small) {
            margin-top: 12px;
        }
    }
}