/*doc
---
title: Scoreboard
name: scoreboard
category: Components
---
Component to display numbers

```html_example
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box">
        <div class="scoreboard-box-number">12004</div>
        <div class="scoreboard-box-label">title</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box">
        <div class="scoreboard-box-number">1009</div>
        <div class="scoreboard-box-label">title</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box">
        <div class="scoreboard-box-number">230</div>
        <div class="scoreboard-box-label">title that breaks</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box scoreboard-box-border">
        <div class="scoreboard-box-number">12004</div>
        <div class="scoreboard-box-label">title</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box scoreboard-box-border">
        <div class="scoreboard-box-number">1009</div>
        <div class="scoreboard-box-label">title</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="scoreboard-box scoreboard-box-border">
        <div class="scoreboard-box-number">230</div>
        <div class="scoreboard-box-label">title that breaks</div>
      </div>
    </div>
  </div>
</div>
```
*/

.scoreboard {
  margin-bottom: $gutter-vertical;
  margin-top: $gutter-vertical;
}

.scoreboard-box {
  margin: $gutter-vertical-half 0;
  padding-bottom: $gutter-vertical;
  padding-top: $gutter-vertical;
  text-align: center;

  @media screen and (min-width: $screen-sm) {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  &-border {
    border: 1px solid $border-default;
    border-radius: $border-radius-base;
  }

  &-number {
    color: $black;
    font-size: $font-size-very-large;
    font-weight: bold;
    line-height: $line-height-very-large;
  }
}