.notices-global {
    $block: &;
    background-color: #94979b;
    color: #fff;
    height: 0;
    overflow: hidden;
    --titleHeight: 20px;
    transition: height 750ms ease-out;

    &.loaded {
        transition: none;
    }

    &__container {
        display: flex;
        gap: 32px;
        padding-top: 16px;
        padding-bottom: 16px;

        &:before,
        &:after {
            content: initial;
        }
    }

    &__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;

        a {
            color: inherit;
            text-decoration: underline;
            background: none !important;
        }
    }

    &__title {
        all: initial;
        font: 700 18px / var(--titleHeight) 'open-sans', sans-serif;
        display: flex;
        align-items: center;
        gap: 10px;
        color: inherit;
        text-transform: uppercase;

        &:before {
            content: '';
            display: block;
            aspect-ratio: 17 / 21;
            height: var(--titleHeight);
            color: inherit;
            background-color: currentColor;
            mask: var(--icon-bell) no-repeat center center / contain;
        }
    }

    &__text {
        all: initial;
        font: 400 12px/1.5 $font-family-sans-serif;
        color: inherit;

        > *:last-child {
            margin-bottom: 0;
        }
    }

    &__dismiss {
        display: block;
        visibility: hidden;
        aspect-ratio: 1;
        height: var(--titleHeight);
        color: inherit;
        background-color: currentColor;
        mask: var(--icon-close) no-repeat center center / cover;
    }

    &[data-dismissable] {
        #{$block}__dismiss {
            visibility: visible;
        }
    }
}
