.c-notification {
    display: flex;
    position: fixed;
    top: 0;
    padding: 1rem;
    align-items: center;
    text-decoration: none;
    text-align: center;
    width: 100%;
    color: #fff;
    background-color: theme('colors.primary.500');
    transition: transform $transition-time ease-in-out;
    z-index: 6;

    //stylelint-disable
    .c-notification-container--backend & {
        .c-notification__hide {
            display: none;
        }
    }
    //stylelint-enable

    @screen lg {
        &::before {
            background-color: theme('colors.primary.500');
            width: 100%;
            left: 0;
            content: '';
            position: absolute;
            top: -1rem;
            display: block;
            height: 1rem;
        }
    }

    &[data-state=inactive] {
        transform: translateY(-100%);
    }

    &[data-state=active] {
        transform: translateY(0);
    }
}


.c-notification__container {
    padding: 1rem;
    margin: 0 auto;
    max-width: 1280px;
}

.c-notification__label {
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 1rem;
}

.c-notification__text {
    flex: 1 1 0%;
}

.c-notification__hide {
    color: #fff;
    font-size: theme('fontSize.2xl');
    top: 0;
}
