/**
* @name Alerts
* @description Alerts to show Success/Error Messages.
* @category communication
* @component alert
*/

@import '../settings/colors';
@import '../settings/core';

$alert__class: '#{$prefix}-alert';
$alert__border-radius: 5px;

$alert__font-size: rem-calc(14) !default;
$alert__font-size--title: rem-calc(16) !default;
$alert__icon-font-size: rem-calc(44) !default;

$alert__background-color: $brand-white !default;
$alert__background-color--info: $blue-base !default;
$alert__background-color--success: $green-base !default;
$alert__background-color--warning: $yellow-base !default;
$alert__background-color--error: $red-base !default;

$alert__font-color: $gray-1 !default;
$alert__font-color--title: $black !default;
$alert__font-color--status: $green-press !default;
$alert__font-color--info: $blue-base !default;
$alert__font-color--success: $green-base !default;
$alert__font-color--warning: $yellow-base !default;
$alert__font-color--error: $red-base !default;

$alert__padding: rem-calc(8);
$alert__padding-right: rem-calc(13);
$alert__padding-left: rem-calc(17);

$alert__padding--call: rem-calc(17);
$alert__padding-top--call: rem-calc(12);
$alert__padding-bottom--call: rem-calc(25);

$alert__width: rem-calc(342);