@mixin notification($bgColor, $fgColor) {
    background-color: $bgColor;

    .Notification-message {
        color: $fgColor;
    }

    .Icons-attention {
        fill: $fgColor;
    }

    .Icons-complete-checkmark {
        fill: $fgColor;
    }
}

.Notification {
    margin-bottom: 20px;

    &-message {
        display: flex;
        padding: 12px 16px;
    }

    &-message-text {
        align-self: center;
    }

    &-message-header {
        font-size: 14px;
        font-weight: 500;
    }

    &-message-subheader {
        font-size: 12px;
    }

    .Icons-attention {
        height: 32px;
        margin-right: 16px;
        width: 32px;
    }

    .Icons-complete-checkmark {
        height: 32px;
        margin-right: 16px;
        width: 32px;
    }
}

.Notification-warning {
    @include notification($fox-light, $fox);
}

.Notification-error {
    @include notification($parrot-light, $parrot);
}

.Notification-info {
    @include notification($bluejay-light, $bluejay);
}