.bulletin {
    --bg-color-info: #005994;
    --bg-color-success: #006135;
    --bg-color-warning: #FFBB00;
    --bg-color-danger: #A32C00;

    --border-info: #004877;
    --border-success: #004727;
    --border-warning: #C69100;
    --border-danger: #802300;

    --light-text: #fbfbfb;
    --dark-text: #000000;

    --light-link-color: #ffffff;
    --light-link-color-hover: #eeeeee;
    --dark-link-color: #000000;
    
    --icon-size-small: 2.25em;
    --icon-size-large: 3em;
}

.bulletin {
    padding: 1em;
    color: var(--light-text);
    border-bottom-width: 5px;
    border-bottom-style: solid;
}

.bulletinMessage a, ::ng-deep .bulletinMessage a {
    font-weight: 500;
    color: var(--light-link-color);
}

.bulletin a:hover, ::ng-deep .bulletinMessage a:hover {
    color: var(--light-link-color-hover);
}

.info {
    background-color: var(--bg-color-info);
    border-bottom-color: var(--border-info);
}

.success {
    background-color: var(--bg-color-success);
    border-bottom-color: var(--border-success);
}

.warning {
    background-color: var(--bg-color-warning);
    border-bottom-color: var(--border-warning);
    color: var(--dark-text);
}

.warning a, ::ng-deep .warning a {
    color: #730000;
}

.warning a:hover, ::ng-deep .warning a:hover {
    color: var(--dark-link-color);
}

.danger {
    background-color: var(--bg-color-danger);
    border-bottom-color: var(--border-danger);
}

.bulletinWrapper {
    display: grid;
    grid-template-areas:
        'icon message close';
    grid-template-columns: 4em 1fr 3em;
    font-size: 16px;
    
    margin: 0 auto;
}

.bulletinIcon {
    grid-area: icon;
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    justify-self: center;
}

.bulletinIcon .mat-icon {
    font-size: var(--icon-size-small);
    width: 100%;
    height: auto;
}

.bulletinMessage {
    grid-area: message;
    font-size: 1em;
    line-height: 1.25em;
}

.bulletinMessage p {
    margin: 0;
}

.expandLink {
    color: var(--light-text);
    display: none;
}

.bulletinClose {
    grid-area: close;
    align-self: start;
    justify-self: end;
}

@media screen and (min-width: 800px) {
    .bulletinWrapper {
        grid-template-columns: 4.5em 1fr 3.5em;
        align-items: center;

        max-width: 1200px;
    }

    .bulletinIcon {
        width: var(--icon-size-large);
        height: var(--icon-size-large);
        place-self: center;
    }

    .bulletinIcon .mat-icon {
        font-size: var(--icon-size-large);
    }

    .bulletinMessage {
        white-space: unset; 
        overflow: unset;
        text-overflow: unset;
        font-size: 1.05em;
    }

    .expandLink {
        display: none;
        height: 0;
    }   
}