@import '../global';

.score-buttons {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;

  &--in-row {
    // on a small screen, the buttons inside a row must
    // collapse down to a single 2px strip on the right
    @include for-tablet-portrait-down {
      margin: -6px -6px -6px 6px;
      align-self: stretch;
      order: 5; // put the bar to the right of the pie
    }
  }

  &--score-bar {
    border-top: 1px solid $WHITE;
    height: $SCORE_BAR_HEIGHT;
    background: $BLACK;
    box-shadow: 0 1px 2px rgba($GREY_900, 0.5);
  }
}

.score-buttons__score-button {
  background: $BLACK;
  color: $WHITE;
  user-select: none;
  padding: 7px 10px;

  // the buttons that show in each row on a big screen
  .score-buttons--in-row & {
    border-radius: 4px;
    background: $WHITE;
    color: $GREY_700;
    border: 1px solid $GREY_300;
    margin-left: 10px;

    &--selected {
      color: $WHITE;
    }

    @include for-tablet-portrait-down {
      display: none;
      white-space: nowrap; // stop the text pushing the height up
      overflow: hidden;
      width: 5px; // 0px seems to have no effect on iOS
      padding: 0;
      margin: 1px; // top margin to counteract the outline
      color: transparent; // stop tiny bits of text showing

      &--selected {
        display: block;
      }
    }
  }

  // the buttons at the top of the screen on small screens
  .score-buttons--score-bar & {
    flex: 1;
    text-transform: uppercase;
    white-space: pre; // so I can control the text going to two lines
    padding: 0;

    &:not(:first-of-type) {
      border-left: 1px solid $GREY_700;
    }
  }
}
