////////////////////
// For making color swatches
///////////////////

@mixin swatch($color) {
  background-color: $color; 
  padding: 14px;
  margin-right: 4px;

  &:hover {
    opacity: 0.7;
  }

  &.active {
    background-color: white;
    border: 2px solid $color;
  }
}