.wrap

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

$c: #2196F3;
$h: #FF4081;

%bg {
  color: #FFF;
  background: $c;
  border-color: $c;
}
%b {
  color: $c;
  border-color: $c;
  background: transparent;
}
%t {
  color: $c;
  border-color: transparent;
  background: transparent;
}
%p {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: $c;
  width: 150%;
  padding-top: 150%;
  transition: 0.25s ease;
}
%pc {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
%c {
  position: relative;
  overflow: hidden;
}
%s {
  box-shadow: 
    0 5px 5px -5px rgba($c, 0.15),
    0 10px 10px -5px rgba($c, 0.15),
    0 15px 15px -5px rgba($c, 0.15),
    0 20px 20px -5px rgba($c, 0.15);
}

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 25px;
  padding: 25px;
  @media screen and (max-width: 1000px) { 
    grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (max-width: 800px) { 
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (max-width: 600px) { 
    grid-template-columns: 1fr;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 25px;
    position: relative;
    border: 1px solid rgba($c, 0.25);
    p {
      margin: 15px 0 0;
      font-family: 'Ubuntu', sans-serif;
    }
    em {
      @extend %pc;
      position: absolute;
      top: 0;
      left: 50%;
      font-style: normal;
      font-size: 12px;
      padding: 5px 10px;
      background: #FFF;
      border: 1px solid rgba($c, 0.25);
    }
  }
}

button {
  padding: 10px 20px;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  font-size: 20px;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  transition: 0.25s ease;
  & > span {
    position: relative;
    z-index: 1;
  }
  &.bg-hide {
    @extend %bg;
    &:hover {
      @extend %b;
    }
  }
  &.bg-show {
    @extend %b;
    &:hover {
      @extend %bg;
    }
  }
  &.bg-text {
    @extend %bg;
    &:hover {
      @extend %t;
    }
  }
  &.bg-text-show-bg {
    @extend %t;
    &:hover {
      @extend %bg;
    }
  }
  &.bg-text-show-border {
    @extend %t;
    &:hover {
      @extend %b;
    }
  }
  &.radial-out {
    @extend %b;
    @extend %c;
    color: #FFF;
    &::after {
      @extend %p;
      @extend %pc;
      border-radius: 999px;
      top: 100%;
    }
    &:hover {
      color: $c;
      &:after {
        top: 300%;
      }
    }
  }
  &.radial-in {
    @extend .radial-out;
    color: $c;
    &::after {
      top: 300%;
    }
    &:hover {
      color: #FFF;
      &:after {
        top: 100%;
      }
    }
  }
  &.slide-down {
    @extend %b;
    @extend %c;
    color: #FFF;
    &::after {
      @extend %p;
      @extend %pc;
    }
    &:hover {
      color: $c;
      &:after {
        top: 300%;
      }
    }
  }
  &.slide-up {
    @extend .slide-down;
    color: $c;
    &::after {
      top: 300%;
    }
    &:hover {
      color: #FFF;
      &:after {
        top: 50%;
      }
    }
  }
  &.slide-left {
    @extend .slide-down;
    &:hover:after {
      left: -90%;
      top: 50%;
    }
  }
  &.slide-right {
    @extend .slide-left;
    &:hover:after {
      left: 190%;
    }
  }
  &.radius-increase {
    @extend %b;
    &:hover {
      border-radius: 30px;
    }
  }
  &.radius-decrease {
    @extend %b;
    border-radius: 30px;
    &:hover {
      border-radius: 6px;
    }
  }
  &.border-dashed {
    @extend %b;
    &:hover {
      border-style: dashed;
    }
  }
  &.border-dotted {
    @extend %b;
    &:hover {
      border-style: dotted;
    }
  }
  &.opacity-increase {
    @extend %bg;
    opacity: 0.75;
    &:hover {
      opacity: 1;
    }
  }
  &.opacity-decrease {
    @extend %bg;
    &:hover {
      opacity: 0.75;
    }
  }
  &.grayscale-increase {
    @extend %bg;
    &:hover {
      filter: grayscale(1);
    }
  }
  &.grayscale-decrease {
    @extend %bg;
    filter: grayscale(1);
    &:hover {
      filter: grayscale(0);
    }
  }
  &.button-blur {
    @extend %bg;
    &:hover {
      filter: blur(6px);
    }
  }
  &.text-blur {
    @extend %bg;
    &:hover {
      span {
        filter: blur(6px);
      }
    }
  }
  &.bg-color {
    @extend %bg;
    &:hover {
      background: $h;
      border-color: $h;
    }
  }
  &.text-color {
    @extend %bg;
    &:hover {
      color: $h;
    }
  }
  &.border-color {
    @extend %b;
    &:hover {
      border-color: $h;
    }
  }
  &.border-text-color {
    @extend .border-color;
    &:hover {
      color: $h;
    }
  }
  &.shadow-increase {
    @extend %bg;
    &:hover {
      @extend %s;
    }
  }
  &.shadow-decrease {
    @extend %bg;
    @extend %s;
    &:hover {
      box-shadow: none;
    }
  }
  &.shadow-float {
    @extend .shadow-increase;
    &:hover {
      transform: translateY(-6px);
    }
  }
  &.scale-increase {
    @extend %bg;
    &:hover {
      transform: scale(1.1);
    }
  }
  &.scale-decrease {
    @extend %bg;
    &:hover {
      transform: scale(0.9);
    }
  }
  &.float-down {
    @extend %bg;
    &:hover {
      transform: translateY(6px);
    }
  }
  &.float-up {
    @extend %bg;
    &:hover {
      transform: translateY(-6px);
    }
  }
  &.float-left {
    @extend %bg;
    &:hover {
      transform: translateX(-6px)
    }
  }
  &.float-right {
    @extend %bg;
    &:hover {
      transform: translateX(6px)
    }
  }
  &.button-rotate {
    @extend %bg;
    &:hover {
      transform: rotate(-6deg);
    }
  }
  &.button-rotate-grow {
    @extend %bg;
    &:hover {
      transform: rotate(-6deg) scale(1.1);
    }
  }
  &.button-rotate-shrink {
    @extend %bg;
    &:hover {
      transform: rotate(-6deg) scale(0.9);
    }
  }
  &.skew-horizontal {
    @extend %bg;
    &:hover {
      transform: skewX(-6deg);
    }
  }
  &.skew-vertical {
    @extend %bg;
    &:hover {
      transform: skewY(-6deg);
    }
  }
  &.flip-horizontal {
    @extend %bg;
    transition: 0.5s ease;
    &:hover {
      transform: rotateY(360deg);
    }
  }
  &.flip-vertical {
    @extend .flip-horizontal;
    &:hover {
      transform: rotateX(360deg);
    }
  }
  &.increase-letter-space {
    @extend %bg;
    &:hover {
      letter-spacing: 5px;
    }
  }
  &.swipe-overlay {
    @extend %b;
    @extend %c;
    &::after {
      @extend %p;
      transform: rotate(25deg);
      top: -100%;
      left: -190%;
    }
    &:hover {
      color: #FFF;
      &:after {
        left: -30%;
      }
    }
  }
  &.swipe-overlay-out {
    @extend .swipe-overlay;
    &::after {
      transition: 0.5s ease;
    }
    &:hover {
      color: $c;
      &:after {
        left: 130%;
      }
    }
  }
  &.icon-slide-left {
    @extend %bg;
    @extend %c;
    &::after {
      @extend %pc;
      content: "👨‍🚀";
      position: absolute;
      left: -20%;
      transition: 0.25s ease;
    }
    span {
      transition: 0.25s ease;
    }
    &:hover {
      span {
        margin-left: 20px;
      }
      &:after {
        left: 20px;
      }
    }
  }
  &.icon-slide-right {
    @extend .icon-slide-left;
    &::after {
      left: 120%;
    }
    &:hover {
      span {
        margin-left: 0;
        margin-right: 20px;
      }
      &:after {
        left: calc(100% - 20px);
      }
    }
  }
}

function CreateButtons(className, isNew) {
  this.className = className,
  this.isNew = isNew;
};
CreateButtons.prototype.createButton = function() {
  return (
    `
      <button class=${this.className}><span>Button</span></button>
      <p>${this.className}</p>
      ${this.isNew ? `<em>New</em>` : ''}
    `
  )
}

const bgHide = new CreateButtons('bg-hide');
const bgShow = new CreateButtons('bg-show');
const bgText = new CreateButtons('bg-text');
const bgTextShowBg = new CreateButtons('bg-text-show-bg');
const bgTextShowBorder = new CreateButtons('bg-text-show-border');
const bgBorder = new CreateButtons('bg-border');
const radialOut = new CreateButtons('radial-out');
const radialIn = new CreateButtons('radial-in');
const slideDown = new CreateButtons('slide-down');
const slideUp = new CreateButtons('slide-up');
const slideLeft = new CreateButtons('slide-left');
const slideRight = new CreateButtons('slide-right');
const radiusIncrease = new CreateButtons('radius-increase');
const radiusDecrease = new CreateButtons('radius-decrease');
const borderDashed = new CreateButtons('border-dashed');
const borderDotted = new CreateButtons('border-dotted');
const opacityIncrease = new CreateButtons('opacity-increase');
const opacityDecrease = new CreateButtons('opacity-decrease');
const grayscaleIncrease = new CreateButtons('grayscale-increase');
const grayscaleDecrease = new CreateButtons('grayscale-decrease');
const buttonBlur = new CreateButtons('button-blur');
const textBlur = new CreateButtons('text-blur');
const bgColor = new CreateButtons('bg-color');
const textColor = new CreateButtons('text-color');
const borderColor = new CreateButtons('border-color');
const borderTextColor = new CreateButtons('border-text-color');
const shadowIncrease = new CreateButtons('shadow-increase');
const shadowDecrease = new CreateButtons('shadow-decrease');
const shadowFloat = new CreateButtons('shadow-float');
const scaleIncrease = new CreateButtons('scale-increase');
const scaleDecrease = new CreateButtons('scale-decrease');
const floatDown = new CreateButtons('float-down');
const floatUp = new CreateButtons('float-up');
const floatLeft = new CreateButtons('float-left');
const floatRight = new CreateButtons('float-right');
const buttonRotate = new CreateButtons('button-rotate');
const buttonRotateGrow = new CreateButtons('button-rotate-grow');
const buttonRotateShrink = new CreateButtons('button-rotate-shrink');
const skewH = new CreateButtons('skew-horizontal');
const skewV = new CreateButtons('skew-vertical');
const flipH = new CreateButtons('flip-horizontal', true);
const flipV = new CreateButtons('flip-vertical', true);
const increaseLetterSpace = new CreateButtons('increase-letter-space', true);
const swipeOverlay = new CreateButtons('swipe-overlay', true);
const swipeOverlayOut = new CreateButtons('swipe-overlay-out', true);
const iconSlideLeft = new CreateButtons('icon-slide-left', true);
const iconSlideRight = new CreateButtons('icon-slide-right', true);

const buttonsArray = [
  iconSlideLeft,
  iconSlideRight,
  swipeOverlayOut,
  swipeOverlay,
  increaseLetterSpace,
  flipH,
  flipV,
  bgHide, 
  bgShow, 
  bgText, 
  bgTextShowBg,
  bgTextShowBorder,
  radialOut, 
  radialIn, 
  slideDown, 
  slideUp, 
  slideLeft, 
  slideRight, 
  radiusIncrease, 
  radiusDecrease, 
  borderDashed,
  borderDotted,
  opacityIncrease,
  opacityDecrease,
  grayscaleIncrease,
  grayscaleDecrease,
  buttonBlur,
  textBlur,
  bgColor,
  textColor,
  borderColor,
  borderTextColor,
  shadowIncrease,
  shadowDecrease,
  shadowFloat,
  scaleIncrease,
  scaleDecrease,
  floatDown,
  floatUp,
  floatLeft,
  floatRight,
  buttonRotate,
  buttonRotateGrow,
  buttonRotateShrink,
  skewH,
  skewV,
];

const buttonsWrapper = document.querySelector('.wrap');
buttonsWrapper.innerHTML = 
  buttonsArray.map(button => `<div>${button.createButton()}</div>`).join('');