@use '../../variables' as *;

$b: '.header-announcement';

#{$b} {
    align-items: center;
    background-color: $header-announcement-bg;
    color: $header-announcement-color;
    display: flex;
    justify-content: center;
    min-height: 4px * 9;
    padding-bottom: 4px * 2;
    padding-left: 4px * 4;
    padding-right: 4px * 4;
    padding-top: calc(4px * 2 + env(safe-area-inset-top));
    position: fixed;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 100%;
    z-index: 105;

    @include font($header-announcement-font);

    body:not(.pwa) & {
        @media (--tablet-landscape-up) {
            position: sticky;
        }
    }

    .pwa & {
        @media (--desktop-up) {
            position: sticky;
        }
    }

    &_secondary {
        background-color: $header-announcement-secondary-bg;
        color: $header-announcement-secondary-color;
    }

    &_error {
        background-color: $header-announcement-error-bg;
        color: $header-announcement-error-color;
    }

    &_warning {
        background-color: $header-announcement-warning-bg;
        color: $header-announcement-warning-color;
    }

    &_success {
        background-color: $header-announcement-success-bg;
        color: $header-announcement-success-color;
    }
}