@import "pack/seed-family/_index";

.c-StatusBarButton {
  $statusStyles: (
    error: red,
    info: blue,
    success: green,
    warning: yellow
  );

  appearance: none;
  box-sizing: border-box;
  border-radius: 9999px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: normal;
  padding: 3px 8px;
  line-height: 1;
  outline: none;

  &:focus {
    box-shadow: 0 0 0 2px rgba(white, 0.4);
    outline: none;
  }

  &__icon {
    margin-left: 3px;
    vertical-align: middle;
  }

  // Styles
  @each $status, $color in $statusStyles {
    @include parent(".c-StatusBar.is-light.is-#{$status}") {
      background-color: _color($color, 500);
      &:focus {
        box-shadow: 0 0 0 2px rgba(white, 0.8);
      }
    }
    @include parent(".c-StatusBar.is-bold.is-#{$status}") {
      background-color: _color($color, 700);
    }
  }

  @include parent(".c-StatusBar.is-bold") {
    text-shadow: 0 1px 1px rgba(black, 0.1);
  }
}