@import '../../styles/common/mixins';
@import '../../styles/common/colors';

.badge {
  @include vertical-align($display: 'inline');
  color: $white;
  background-color: $neutral-3;
  border-radius: 3px;
  border: 1px solid $neutral-3;
  font-size: 18px;
  font-weight: 200;
  float: left;
  height: 30px;
  justify-content: center;
  min-width: 30px;

  &.heavy {
    height: 95px;
    min-width: 95px;
    font-size: 32px;
    svg + span {
      margin-left: 10px;
    }
    span {
      font-weight: normal;
    }
    &.padded {
      padding: 0 15px;
    }
  }

  &.padded {
    padding: 0 7px;
  }

  svg {
    fill: $white;
  }

  svg + span {
    margin-left: 5px;
  }

  &.fog {
    svg {
      fill: $neutral-4;
    }
    span {
      color: $neutral-4;
    }
  }

  &.success {
    background-color: $success;
    border: 1px solid $success;
  }

  &.danger {
    background-color: $danger;
    border: 1px solid $danger;
  }

  &.warning {
    background-color: $warning;
    border: 1px solid $warning;
  }

  &.sky {
    background-color: $primary-1;
    border: 1px solid $primary-1;
  }

  &.navy {
    background-color: $primary-5;
    border: 1px solid $primary-5;
  }

  &.border {
    background-color: transparent;
    border: 1px solid $neutral-3;
    color: $primary-4;
  }
}

.badge + .badge {
  margin-left: 10px;
}