.at-notificationBanner.--light .at-notificationBanner__textWrapper,
.at-notificationBanner.--light .at-notificationBanner__closeButton {
    color: var(--baseLight100);
}

.header .at-notificationBanner {
    display: none;
    flex: 1 0 100%;
    position: relative;
    padding-inline: var(--pageGutter);
    padding-block: var(--marginSmall);
}

.header .at-notificationBanner--show {
    display: flex;
}

.at-notificationBanner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-notificationBanner__textWrapper {
    margin-right: var(--marginMedium);
    text-align: center;
    font-size: var(--preTitleSize);
}

.at-notificationBanner__text {
    display: inline;
    text-decoration: none;
    color: inherit;
}

.at-notificationBanner__text.--withLink::after {
    display: inline-block;
    margin-inline-start: .5rem;
    content: '\e802';
    font-family: var(--iconFont);
    transition: transform 0.3s ease-in-out;
}

.at-notificationBanner:hover .at-notificationBanner__text.--withLink::after {
    transform: translate(0.3em);
}

.at-notificationBanner__closeButton {
    position: absolute;
    right: 0;
    padding-inline: var(--marginSmall);
    z-index: 20;
}

.at-notificationBanner__closeButton,
.at-notificationBanner__closeButton:hover {
    border: none;
    background: none;
    transition: none;
    transform: none;
    color: var(--baseDark900);
}

.at-notificationBanner__closeButton::before {
    margin: 0;
}