/* components/MessageAlert.module.scss */

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

$default: #9E9E9E;
$error: #D50000;
$warning: #FF6F00;
$neutral: #448AFF;
$success: #388E3C;
$uhm: #c1610d;

$light: #eee;
$dark: #222;

*,
*:after,
*:before {
  box-sizing: border-box;
}

.message {
  background: $light;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.31);
  border-radius: 1em;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  max-width: 40em;
  margin: 2em auto;

  header {
    background: $default;
    width: 100%;
    padding: 0.5em;
  }

  i:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f128";
    font-style: normal;
    color: $light;
    background: mix($dark, $default, 85%);
    padding: 1em 0.75em;
    font-size: 1.25em;
    display: block;
    width: 2.5em;
    height: 100%;
    text-align: center;
  }

  h2 {
    margin: 0.75em;
    font-size: 1.25em;
    position: relative;
    display: block;
    width: calc(100% - 2.5em - 1.5em);

    span {
      color: $default;
    }

    &:after {
      content: "";
      border-bottom: 0.1em solid $default;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.error {
  header {
    background: $error;
  }

  i:after {
    background: mix($dark, $error, 85%);
    color: lighten($error, 25%);
    content: "\f12a";
  }

  h2 {
    span {
      color: $error;
    }

    &:after {
      border-bottom: 0.1em solid $error;
    }
  }
}

.warning {
  header {
    background: $warning;
  }

  i:after {
    background: mix($dark, $warning, 85%);
    color: lighten($warning, 25%);
    content: "\f071";
  }

  h2 {
    span {
      color: $warning;
    }

    &:after {
      border-bottom: 0.1em solid $warning;
    }
  }
}

.neutral {
  header {
    background: $neutral;
  }

  i:after {
    background: mix($dark, $neutral, 85%);
    color: lighten($neutral, 25%);
    content: "\f05a";
  }

  h2 {
    span {
      color: $neutral;
    }

    &:after {
      border-bottom: 0.1em solid $neutral;
    }
  }
}

.success {
  header {
    background: $success;
  }

  i:after {
    background: mix($dark, $success, 85%);
    color: lighten($success, 25%);
    content: "\f058";
  }

  h2 {
    span {
      color: $success;
    }

    &:after {
      border-bottom: 0.1em solid $success;
    }
  }
}

.uhm {
  header {
    background: $uhm;
  }

  i:after {
    background: mix($dark, $uhm, 85%);
    color: lighten($uhm, 25%);
    content: "\f2fe";
  }

  h2 {
    span {
      color: $uhm;
    }

    &:after {
      border-bottom: 0.1em solid $uhm;
    }
  }
}