<!-- https://cdpn.io/pen/debug/QWYzbeO -->

<template>
  <div id="app">
    
    <h1>CSS Challenge</h1>
    <p>{{challenge}}</p>
    <h2>{{message}}</h2>
    
    <p>Cupcake apple pie gingerbread icing icing. Marzipan sweet marzipan ice cream chupa chups toffee jelly beans powder marzipan. Tiramisu powder halvah lollipop gummies pudding sweet. Apple pie brownie jelly-o muffin donut pudding chocolate. Halvah jelly beans donut sesame snaps cake. Tart bear claw halvah jelly beans cotton candy bonbon cupcake cookie brownie. Icing icing donut jelly bonbon gummi bears. Candy canes gummi bears pastry sugar plum sugar plum powder sugar plum chocolate cookie. Cake jujubes sesame snaps halvah cheesecake. Dragée fruitcake donut cookie candy canes. Jelly dragée danish pudding jujubes. Soufflé chocolate cake tiramisu donut biscuit apple pie.</p>
    
    <div class="button-group">
      <button @click="doSomething" class="button-group__item">{{buttons[0]}}</button>
      <button @click="doSomething" class="button-group__item">{{buttons[1]}}</button>
      <button @click="doSomething" class="button-group__item">{{buttons[2]}}</button>
    </div>
    
    <p>Tootsie roll pastry wafer danish biscuit gummies. Macaroon carrot cake topping liquorice shortbread fruitcake tootsie roll topping. Powder candy chocolate bar gingerbread tart oat cake tiramisu jelly jujubes. Lemon drops shortbread sesame snaps cookie caramels. Oat cake fruitcake ice cream macaroon powder jelly beans croissant cupcake. Macaroon biscuit cake gummi bears pastry lollipop pudding cheesecake. Jujubes caramels pastry chocolate bar cotton candy dessert toffee toffee gummies. Bonbon shortbread muffin jelly-o soufflé bear claw. Marzipan tiramisu jelly-o apple pie carrot cake bear claw chocolate chupa chups. Marzipan apple pie oat cake sesame snaps tootsie roll. Cotton candy topping cake pie gummi bears apple pie carrot cake. Shortbread dessert cake topping dragée wafer tiramisu fruitcake.</p>
  
    <p>Marshmallow shortbread bear claw cake gingerbread wafer macaroon sweet roll fruitcake. Sweet roll carrot cake apple pie cotton candy danish sesame snaps wafer marshmallow tiramisu. Cheesecake dessert cake sugar plum chocolate chocolate cake. Tiramisu cotton candy muffin marzipan gummies. Soufflé cookie muffin oat cake cupcake cupcake topping ice cream. Chocolate liquorice muffin liquorice caramels. Apple pie dessert danish carrot cake lemon drops. Gummi bears croissant soufflé liquorice dragée jelly-o croissant gingerbread candy canes. Powder dessert gummi bears caramels tiramisu bear claw. Pastry liquorice dessert pie jelly-o gingerbread. Croissant brownie shortbread cupcake marzipan. Bonbon carrot cake chocolate bar chocolate bar ice cream cookie.</p>
    
    <p>Toffee jelly beans sugar plum pudding macaroon jelly-o lemon drops marzipan macaroon. Shortbread sweet apple pie tart dessert cake dragée biscuit shortbread. Icing marshmallow liquorice tiramisu sugar plum brownie jujubes. Marzipan tart topping gummies chocolate. Chocolate caramels lollipop soufflé topping chocolate cake. Fruitcake biscuit apple pie gummies tart lollipop chocolate bar. Chocolate bar cake danish marshmallow biscuit sugar plum chocolate cake shortbread brownie. Donut powder candy canes liquorice sesame snaps jelly caramels icing. Toffee tiramisu toffee pie sweet roll gingerbread. Jelly beans donut bear claw fruitcake tart bonbon gummies macaroon. Pie shortbread carrot cake cookie halvah dragée ice cream dragée. Cheesecake halvah sweet roll soufflé wafer gingerbread jelly-o. Soufflé toffee sweet roll halvah sweet candy cake.</p>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      challenge: 'Your challenge is to build a(n) Button Group component. You need to use the :last-child selector at least once. You also need to use the grid-column-start, shape-margin, and grid-template-columns properties each at least once.',
      message: 'What the heck is this Vue pen??',
      buttons: [
        'button 1',
        'button 2',
        'button 3'
      ]
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    color: #2c3e50;
    margin-top: 60px;
  }

  button {
    color: #4fc08d;
  }

  button {
    background: none;
    border: solid 1px;
    border-radius: 2em;
    font: inherit;
  }

  .button-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-row: repeat(3, 1fr);
    gap: 1rem;
    float: left;
    margin: 1rem;
    clip-path: ellipse(11rem 10rem at 50% 50%);
    shape-outside: ellipse(1rem 4rem at 40% 40%);
    shape-margin: 12rem;
    background-color: #f6f6f650;
  }   

  .button-group__item {
    grid-row-start: 1;
    padding: 1rem;
   }

  .button-group__item:nth-child(2) {
    grid-row-start: 2;
    grid-column-start: 2;
  }

  .button-group__item:last-child {
    grid-column-start: 3;
    grid-row-start: 3;
  }

  .button-group__item:hover {
    background-color: #f6f6f6;
   }
</style>