.transit {
  transition: background-color 300ms ease-in-out;
}

html {
 font-family: sans-serif;
  font-size: 16px;
}
button {
  padding: 1em 2em;
  background-color: lightgray;
  border: 2px solid #b2b2b2;
  font-weight: bold;
  font-size: 120%;

  cursor: pointer;

  @extend .transit;
}
button:hover,
button:active,
button:focus {
  background-color: #a7a7a7;
}

#create-element {

}
#wrapper {
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 500px;
  width: 100%;

  .container {
    width: 500px;
    height: 100%;

    > div {
      box-sizing: border-box;
      padding: 1.5em .5em;
      width: 100%;
      height: 80px;
      line-height: 36px;
      border-bottom: 2px solid #708b97;
      cursor: pointer;
      @extend .transit;

      &:hover {
        background-color: rgba(0,0,0,.3);
      }
    }

  }

  .draggable {
    background-color: lightblue;
  }
  .dropable {
    background-color: lightpink;
  }
}