<commit_before>// (C) Copyright 2014 Hewlett Packard Enterprise Development LP

.tiles {
  width: 100%;
  padding: halve($inuit-base-spacing-unit);

  display: flex;
  flex-wrap: wrap;

  > .tile {
    flex: 1 0 $tile-size;
    // don't count padding for flex basis
    // this makes it easier to align tiles with graphic components
    ////box-sizing: content-box;
    margin: halve($inuit-base-spacing-unit);
    
    > * {
      // reset box sizing on tile's children
      box-sizing: border-box;
    }

    &--wide {
      flex-basis: calc(100% - #{$inuit-base-spacing-unit});
      box-sizing: border-box;
    }
  }

  &__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw;
    max-width: 100%;

    .tiles__left,
    .tiles__right {
      flex: 0 0 auto;
    }

    .tiles {
      flex: 1;
      margin: 0px;

      &--direction-row {
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
      }
    }
  }

  &--fill {
    justify-content: space-around;
  }

  &--flush {
    //margin: - $inuit-base-spacing-unit;
    //width: calc(100% + #{double($inuit-base-spacing-unit)});
    padding: 0px;

    > .tile {
      margin: 0px;

      &--wide {
        flex-basis: 100%;
      }
    }
  }

  &--direction {
    &-row {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }

    &-column {
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  &--moreable {
    position: relative;
    padding-bottom: double($inuit-base-spacing-unit);

    .tiles__more {
      position: absolute;
      bottom: 0px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }

  &--small {
    > .tile {
      flex-basis: $tile-small-size;
    }
  }

  &--large {
    > .tile {
      flex-basis: $tile-large-size;
    }
  }
}

.tile {
  overflow: hidden;

  .status-icon {
    margin-right: quarter($inuit-base-spacing-unit);
  }

  &.box--align-center {
    text-align: center;
  }

  > .chart {
    width: 100%;
  }

  &--selectable {
    cursor: pointer;
    transition: background-color 0.2s;

    &.tile--selected {
      background-color: $selected-background-color;
    }

    &:hover:not(.tile--selected) {
      background-color: $hover-background-color;<commit_msg>Style large tiles to be 100% width on palm.<commit_after>// (C) Copyright 2014 Hewlett Packard Enterprise Development LP

.tiles {
  width: 100%;
  padding: halve($inuit-base-spacing-unit);

  display: flex;
  flex-wrap: wrap;

  > .tile {
    flex: 1 0 $tile-size;
    // don't count padding for flex basis
    // this makes it easier to align tiles with graphic components
    ////box-sizing: content-box;
    margin: halve($inuit-base-spacing-unit);

    > * {
      // reset box sizing on tile's children
      box-sizing: border-box;
    }

    &--wide {
      flex-basis: calc(100% - #{$inuit-base-spacing-unit});
      box-sizing: border-box;
    }
  }

  &__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw;
    max-width: 100%;

    .tiles__left,
    .tiles__right {
      flex: 0 0 auto;
    }

    .tiles {
      flex: 1;
      margin: 0px;

      &--direction-row {
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
      }
    }
  }

  &--fill {
    justify-content: space-around;
  }

  &--flush {
    //margin: - $inuit-base-spacing-unit;
    //width: calc(100% + #{double($inuit-base-spacing-unit)});
    padding: 0px;

    > .tile {
      margin: 0px;

      &--wide {
        flex-basis: 100%;
      }
    }
  }

  &--direction {
    &-row {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }

    &-column {
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  &--moreable {
    position: relative;
    padding-bottom: double($inuit-base-spacing-unit);

    .tiles__more {
      position: absolute;
      bottom: 0px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }

  &--small {
    > .tile {
      flex-basis: $tile-small-size;
    }
  }

  &--large {
    > .tile {

      @include media-query(lap-and-up) {
        flex-basis: $tile-large-size;
      }

      @include media-query(palm) {
        flex-basis: 100%;
      }
    }
  }
}

.tile {
  overflow: hidden;

  .status-icon {
    margin-right: quarter($inuit-base-spacing-unit);
  }

  &.box--align-center {
    text-align: center;
  }

  > .chart {
    width: 100%;
  }

  &--selectable {
    cursor: pointer;
    transition: background-color 0.2s;

    &.tile--selected {
      background-color: $selected-background-color;
    }

    &:hover:not(.tile--selected) {
      background-color: $hover-background-color;
{'fraction_non_alphanumeric': 0.15372035977105478, 'fraction_numerical': 0.019623875715453803, 'mean_word_length': 1.876543209876543, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6189109', 'n_tokens_mistral': 1867, 'n_tokens_neox': 1693, 'n_words': 345}