.notification-bar {
    position: relative;
    width: 100%;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--accent-1);
    padding-inline: var(--dp-section-pad-inline);
	display: grid;
    grid-template-rows: 0fr;
}

.notification-bar.notification-bar--ready {
    transition: var(--wp--custom--motion--base);
}

.notification-bar__wrap {
    max-width: calc(var(--wp--custom--properties--container-w) * 1px);
	margin-inline: auto;
    overflow: hidden;
    padding-inline: var(--dp-section-pad-inline);
}

.notification-bar__message {
    margin-block: var(--wp--preset--spacing--2-xs);
    text-align: center;
}

.notification-bar__message a {
    color: inherit;
    text-decoration: underline;
}

.notification-bar__message a:hover {
    color: var(--wp--preset--color--accent-2);
}

.notification-bar__dismiss {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--wp--preset--spacing--2-xs);
    background: none;
    border: none;
    color: var(--wp--preset--color--accent-1);
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
}

.notification-bar__dismiss:hover {
    color: var(--wp--preset--color--accent-2);
}

.notification-bar--scrolled, 
.notification-bar--dismissed, 
.notification-bar--pending {
    grid-template-rows: 0fr !important;
}

.notification-bar:not(.notification-bar--scrolled):not(.notification-bar--dismissed):not(.notification-bar--pending) {
    grid-template-rows: 1fr !important;
}