<template>
  <div class="palette-root">
    Click to copy var
    <div class="palette-wrapper">
      <ColorBlock
        v-for="(color, name) in colors"
        :key="name"
        :name="name"
        :color="color"
      />
    </div>
  </div>
</template>

<script>
import ColorBlock from './ColorBlock'

export default {
  components: {
    ColorBlock,
  },

  props: {
    colors: Object,
  },
}
</script>

<style
  lang="postcss"
  scoped
>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:100,400,700|Muli:200,300,400,500,700&display=swap');

  .palette-root {
    font-family: Muli, sans-serif;
  }

  .palette-wrapper {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;

    & > * {
      margin: 10px 10px 0 0;
    }
  }
</style>
