.alert {
  margin-bottom: 2.4rem;
  border-radius: 0.8rem;
  padding: 1.6rem;
  padding-right: 3.2rem;
  position: relative;
  color: colors('white');
  background-color: colors('base900');

  p {
    margin-bottom: 0;
  }

  .close {
    display: flex;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;

    .fa {
      color: colors('base400');
      font-size: 1.6rem;

      &:hover,
      &:active {
        color: colors('base200');
      }
    }
  }

  button-clab {
    margin-top: 1.6rem;
  }

  button.empty {
    color: colors('white');
  }

  &.fixed {
    max-width: 50%;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 2.4rem;
    z-index: 4;
    box-shadow: 0 1rem 1rem 0 rgba(0, 20, 32, 0.05),
      0 1.4rem 2.8rem 0 rgba(0, 20, 32, 0.16);
  }

  @each $status, $color in $default-status {
    $status-color: nth($color, 1);

    &.#{$status} .title {
      margin-bottom: 0.8rem;
      color: $status-color;
      font-size: 1.8rem;
      font-weight: 700;
      text-rendering: optimizeLegibility;
      line-height: 1.4em;
    }
  }
}