<commit_before><template>
  <div class="va-layout gutter--md">
    <div class="va-row">
      <h3>Spacing playground</h3>
    </div>
    <div class="va-row">
      <div class="flex xs3">
        <span>m</span><vuestic-simple-select :options="directionList" v-model="selectedMarginDirection"/>
      </div>
      <div class="flex xs2">
        <span>-</span><vuestic-simple-select :options="sizesList" v-model="selectedMarginSize"/>
      </div>
      <div class="flex xs3 offset-2">
        <span>p</span><vuestic-simple-select :options="directionList" v-model="selectedPaddingDirection"/>
      </div>
      <div class="flex xs2">
        <span>-</span><vuestic-simple-select :options="sizesList" v-model="selectedPaddingSize"/>
      </div>
    </div>
    <div class="va-row">
      <div class="flex xs6">{{selectedMarginClass}}</div>
      <div class="flex xs6">{{selectedPaddingClass}}</div>
    </div>
    <div class="va-row">
      <div class="flex xs12">
        <div class="playground-component">
          <div class="playground-component__margin" :class="selectedMarginClass">
            <div :class="selectedPaddingClass" class="playground-component__padding">
              <div class="playground-component__inner"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="va-row">
      <div class="flex xs12">
        <vuestic-color-presentation color="#c9f7db" name="padding"/>
        <vuestic-color-presentation color="#ffd093" name="margin"/>
      </div>
    </div>
  </div>
</template>

<script>
import VuesticSimpleSelect from '../vuestic-simple-select/VuesticSimpleSelect'
import VuesticColorPresentation from '../vuestic-color-presentation/VuesticColorPresentation'

export default {
  name: 'spacing-playgroud',
  components: { VuesticColorPresentation, VuesticSimpleSelect },
  data () {
    return {
      directionList: ['a', 'y', 'x', 't', 'r', 'b', 'l'],
      selectedMarginDirection: '',
      selectedPaddingDirection: '',
      sizesList: ['1', '2', '3', '4', '5', 'auto'],
      selectedMarginSize: '',
      selectedPaddingSize: '',
    }
  },
  computed: {
    selectedMarginClass () {
      return (this.selectedMarginDirection && this.selectedMarginSize)
        ? `m${this.selectedMarginDirection}-${this.selectedMarginSize}`
        : ''
    },
    selectedPaddingClass () {
      return (this.selectedPaddingDirection && this.selectedPaddingSize)
        ? `p${this.selectedPaddingDirection}-${this.selectedPaddingSize}`
        : ''
    }
  }
}
</script>

<style lang="scss">
.flex {
   display: flex;
   align-items: baseline;
 }
.playground-component {
  background-color: #ffd093;
  &__padding {
    background-color: #c9f7db;
  }
  &__inner {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    height: 20px;
  }
}
</style>
<commit_msg>fix: .flex selector was global<commit_after><template>
  <div class="spacing-playground va-layout gutter--md">
    <div class="va-row">
      <h3>Spacing playground</h3>
    </div>
    <div class="va-row">
      <div class="flex xs3">
        <span>m</span><vuestic-simple-select :options="directionList" v-model="selectedMarginDirection"/>
      </div>
      <div class="flex xs2">
        <span>-</span><vuestic-simple-select :options="sizesList" v-model="selectedMarginSize"/>
      </div>
      <div class="flex xs3 offset-2">
        <span>p</span><vuestic-simple-select :options="directionList" v-model="selectedPaddingDirection"/>
      </div>
      <div class="flex xs2">
        <span>-</span><vuestic-simple-select :options="sizesList" v-model="selectedPaddingSize"/>
      </div>
    </div>
    <div class="va-row">
      <div class="flex xs6">{{selectedMarginClass}}</div>
      <div class="flex xs6">{{selectedPaddingClass}}</div>
    </div>
    <div class="va-row">
      <div class="flex xs12">
        <div class="playground-component">
          <div class="playground-component__margin" :class="selectedMarginClass">
            <div :class="selectedPaddingClass" class="playground-component__padding">
              <div class="playground-component__inner"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="va-row">
      <div class="flex xs12">
        <vuestic-color-presentation color="#c9f7db" name="padding"/>
        <vuestic-color-presentation color="#ffd093" name="margin"/>
      </div>
    </div>
  </div>
</template>

<script>
import VuesticSimpleSelect from '../vuestic-simple-select/VuesticSimpleSelect'
import VuesticColorPresentation from '../vuestic-color-presentation/VuesticColorPresentation'

export default {
  name: 'spacing-playgroud',
  components: { VuesticColorPresentation, VuesticSimpleSelect },
  data () {
    return {
      directionList: ['a', 'y', 'x', 't', 'r', 'b', 'l'],
      selectedMarginDirection: '',
      selectedPaddingDirection: '',
      sizesList: ['1', '2', '3', '4', '5', 'auto'],
      selectedMarginSize: '',
      selectedPaddingSize: '',
    }
  },
  computed: {
    selectedMarginClass () {
      return (this.selectedMarginDirection && this.selectedMarginSize)
        ? `m${this.selectedMarginDirection}-${this.selectedMarginSize}`
        : ''
    },
    selectedPaddingClass () {
      return (this.selectedPaddingDirection && this.selectedPaddingSize)
        ? `p${this.selectedPaddingDirection}-${this.selectedPaddingSize}`
        : ''
    }
  }
}
</script>

<style lang="scss">
.spacing-playground {
  .playground-component {
    background-color: #ffd093;
    &__padding {
      background-color: #c9f7db;
    }
    &__inner {
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.2);
      height: 20px;
    }
  }
}
</style>

{'fraction_non_alphanumeric': 0.16978492743486623, 'fraction_numerical': 0.012589613568805735, 'mean_word_length': 3.036697247706422, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6648794', 'n_tokens_mistral': 1868, 'n_tokens_neox': 1809, 'n_words': 321}