@import "pack/seed-this/_index";
@import "../../configs/color";

.c-StatusBar {
  @import "../../resets/base";
  $block: this();

  $statusStyles: (
    error: red,
    info: blue,
    success: green,
    warning: yellow
  );

  @mixin statusBarStyleBold($color: blue) {
    background-color: _color($color, 500);
    border-bottom: 1px solid _color($color, 600);
    color: white;
  }

  @mixin statusBarStyleLight($color: blue) {
    background-color: _color($color, 200);
    border-bottom: 1px solid _color($color, 300);
    color: _color($color, 500);
  }

  cursor: pointer;
  padding: 6px 20px;
  min-height: 32px;
  text-align: center;
  @include statusBarStyleLight(blue);

  &__content {
    font-size: 13px;
    line-height: 1;
  }

  &.is-bold {
    #{$block}__content {
      text-shadow: 0 1px 1px rgba(black, 0.1);
    }
  }

  // Styles
  @each $status, $color in $statusStyles {
    &.is-#{$status} {
      &.is-bold {
        @include statusBarStyleBold($color);
      }
      &.is-light {
        @include statusBarStyleLight($color);
      }
    }
  }
}