$blue: #259BB6;
$green: #9BBF40;
$purple: #915B9F;

@mixin size($width, $height: $width) {
	width: $width;
	height: $height;
}

@mixin absoluteCenter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin light-button($accent) {
  border: 2px solid $accent;
  color: $accent;
  
  &:before {
    opacity: 0;
    background-color: $accent;
  }
  
  &:hover { color: white; }
}

@mixin dark-button($accent) {
  border: 2px solid $accent;
  color: white;
  
  &:before { background-color: $accent; }
  &:hover { color: $accent; }
}

html,body {
  @include size(100%);
  box-sizing: border-box;
  
  *, *:before, *:after {
    box-sizing: border-box;
  }
}
  
.wrapper {
  width: 504px;
  max-width: 100%;
  @include absoluteCenter;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 236px);
  grid-gap: 16px 32px;
  justify-content: center;
}
  
.btn {
  @include size(100%, 48px);
  position: relative;
  overflow: hidden;
  font-size: 18px;
  background: transparent;
  cursor: pointer;
  &:focus { outline: none; }

  &:before {
    content: "";
    @include size(100%);
    @include absoluteCenter;
    z-index: -1;
  }

  &--1 {
    @extend .btn;
    @include light-button($blue);
    transition: color 0s linear 0.3s;

    &:before {
      @include size(0);
      opacity: 1;
      border-radius: 100%;
      transition: all 0.3s linear;
    }

    &:hover {
      transition-delay: 0s;
      &:before { @include size(250px); }
    }
  }

  &--2 {
    @extend .btn;
    @include dark-button($blue);
    transition: color 0s linear 0s;

    &:before {
      @include size(250px);
      @include absoluteCenter;
      border-radius: 100%;
      transition: all 0.3s linear;
    }

    &:hover {
      transition-delay: 0.3s;
      &:before { @include size(0); }
    }
  }

  &--3 {
    @extend .btn;
    @include light-button($green);
    transition: color 0.4s linear;

    &:before { transition: opacity 0.3s linear 0.1s; }
    &:hover:before { opacity: 1; }
  }

  &--4 {
    @extend .btn;
    @include dark-button($green);
    transition: color 0.3s linear 0.1s;

    &:before { transition: opacity 0.4s linear; }
    &:hover:before { opacity: 0; }
  }

  &--5 {
    @extend .btn;
    @include light-button($purple);
    transition: color 100ms linear;

    &:before {
      height: 0;
      opacity: 1;
      transition: height 200ms linear;
    }

    &:hover:before { height: 100%; }
  }

  &--6 {
    @extend .btn;
    @include dark-button($purple);
    transition: color 100ms linear;

    &:before { transition: height 200ms linear; }
    &:hover:before { height: 0; }
  }
}