.status-bar {
  @include flex;
  @include flex-align($x: center, $y: middle);
  background: lighten($warning-color, 36%);
  flex-direction: column;
  margin: 0;
  padding: $space-normal $space-smaller;

  .message {
    font-weight: $font-weight-medium;
    margin-bottom: $zero;
  }

  .button {
    margin: $space-smaller $zero $zero;
    padding: $space-small $space-normal;
  }

  &.danger {
    background: lighten($alert-color, 30%);

    .button {
      // Default and disabled states
      &,
      &.disabled,
      &[disabled],
      &.disabled:hover,
      &[disabled]:hover,
      &.disabled:focus,
      &[disabled]:focus {
        background-color: $alert-color;
        color: $color-white;
      }

      &:hover,
      &:focus {
        background-color: darken($alert-color, 7%);
        color: $color-white;
      }
    }
  }

  &.warning {
    background: lighten($warning-color, 36%);
  }
}