.alert {
    max-width:1600px;
    margin:0 auto;
}

.alert.catastrophic {

    .alert-header {
        @include font-impact(bold, 30px, white);
        .inner {
            max-width:1200px;
            padding:20px 34px;
            margin:0 auto;
        }
        .sidebar, .main {
            display:table-cell;
            vertical-align:middle;
            table-layout:fixed;
        }
    }
    .alert-content {
        .inner {
            max-width:1200px;
            padding:45px 34px;
            margin:0 auto;
        }
        .sidebar, .main {
            display:table-cell;
            vertical-align:top;
            table-layout:fixed;
        }
    }
    .sidebar { width:230px; }
    .main { padding-left:60px; }

    .logo img {
        max-width:100%;
        height:auto;
    }

    .field-name-field-alert-info-box-title {
        @include font-impact(bold, 18px, $heading-color);
        margin-bottom:16px;
    }
    .alert-info-body {
        @include font-paragraph(normal, 14px, $text-color);
        margin-bottom:16px;
    }
    .links { font-size:14px; }

    &.outline {
        .alert-header {
            background: $primary-color;
            border-bottom: 5px solid _darken($primary-color, 19%);
        }
        .field-name-field-alert-info-box .field-collection-view {
            padding: 16px 20px;
            border: 1px solid _lighten($neutral-color, 31%);
            border-top: 5px solid $primary-color;
        }
        .field-name-field-alert-info-box-title {
            color:$primary-color;
            font-weight:normal;
        }
    }
    &.fill {
        background-color: _lighten($neutral_color, 45%);
        .alert-header { background-color: _darken($primary-color, 19%); }
        .field-name-field-alert-info-box .field-collection-view {
            padding:20px;
            background-color:white;
        }
    }
}


.alert .readmore {
    @include font-impact(600, 12px, _darken($neutral-color, 5%));
    text-transform: uppercase;
    white-space:nowrap;
    &:hover { text-decoration: underline; }
    &:after {
        font-family: FontAwesome;
        content: "\00A0" " " $icon-action;
    }
}
.alert .headline {
    @include font-impact(600, 18px, #ed1c24);
    max-width:1200px;
    margin: 0 auto;
    padding: 25px 28px;
}
.alert .alert-description {
    margin: 10px 0;
    @include font-compact(normal, 16px, $text-color);
}

.alert.major {
    border-bottom: 7px solid #ed1c24;
    .headline {
        &:before {
            font-family: FontAwesome;
            content: "\f071" "\00A0" "\00A0"; // fa-warning
        }
    }
}
.alert.major .close-button {
    display:none;
}
.alert.minor {
    border-bottom: 7px solid $primary-color;
    .headline {
        &:before {
            font-family: FontAwesome;
            content: "\f05A" "\00A0" "\00A0"; // fa-info-circle
            color: _darken($neutral-color, 5%);
        }
    }
}
.alert.minor .close-button {
    display:inline-block;
    float:right;
    cursor:pointer;
    line-height:1em;

    // Increase touchable size a bit
    padding:6px;
    margin-top:-6px;

    &:before {
        font-family: FontAwesome;
        content: "\f00d"; // fa-times
        color: _darken($neutral-color, 5%);
    }
}


.js .alert-banner {
    display:none;
}


@include phone {

    .alert.catastrophic {
        .alert-header {
            .inner { padding: 20px 16px; }
            .sidebar { display:block; }
            .main { display:block; }
        }
        .alert-content {
            .inner {
                padding: 20px 16px;
                @include display-flex;
                @include flex-direction(column-reverse);
            }
            .sidebar {
                display:block;
                padding-left: 35px;
                padding-right: 35px;
            }
            .main { display:block; padding-bottom:40px; }
        }

        .sidebar { width:auto; }
        .main { padding:0; }

        .logo img {
            max-height:50px;
            width:auto;
        }
    }

    .alert.major .headline { font-size:16px; }
    .alert.minor .headline { font-size:16px; }

}