.aw-header-notification {
    display: flex;
    align-items: flex-start;
    padding-top: env(safe-area-inset-top, 0px);

    &__wrapper {
        display: flex;
        flex: auto;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;

        &-content {
            display: flex;
            gap: 1rem;

            &-text {
                font-weight: 700;
                font-size: 0.875rem;
                line-height: 1rem;
            }
        }

        &-block {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            flex: auto;

            &--icon {
                padding-left: 2rem;
            }
        }

        &-buttons {
            display: flex;
            gap: 1rem;

            .aw-button {
                border-radius: 0.3125rem;
                font-weight: 700;

                --btn-bg-color: #ffffff;
                --btn-color: #14171d;

                &:hover {
                    background-color: #e7eaed;
                    border-color: #e7eaed;
                }
            }
        }
    }

    &__close-button {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        color: #e7eaed;

        &:hover {
            color: #ffffff;

            .aw-header-notification__close-button-text {
                color: #ffffff;
            }
        }

        &-icon {
            flex: none;
        }

        &-text {
            color: #e7eaed;
            font-weight: 700;
        }
    }

    & + * {
        --header-padding-top: var(--header-padding-bottom, 0.5rem);
    }

    & + * [class*='--fixed-top'] {
        --header-padding-top: calc(
            env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem)
        );
    }
}

@screen lg {
    .aw-header-notification {
        &__wrapper {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;

            &-block {
                &--icon {
                    padding-left: 0;
                }
            }

            &-content {
                align-items: center;
                justify-content: end;
                flex: auto;
            }
        }
    }
}