button.pcss

.btn {
  @apply inline-block text-center font-normal max-w-xs;

  &:hover {
    @apply no-underline;
  }

  &.btn--hoveractive:hover .btn__body,
  &.btn--hoveractive:hover .btn__icon {
    @apply bg-black text-white;
  }
  &.btn--hoveractive:hover .btn__icon {
    @apply border-grey-600;
  }

  &.btn--hoveractive.btn--fading:hover .btn__body,
  &.btn--hoveractive.btn--fading:hover .btn__icon {
    @apply bg-grey-700 text-white;
  }

  &.btn--hoveractive.btn--fading:hover .btn__icon {
    @apply border-grey-500;
  }
}

.btn__body,
.btn__icon {
  @apply transition duration-200 bg-black text-white;
}

.btn__icon {
  @apply border-l border-grey-300;
}

.btn__body {
  @apply flex h-full items-center justify-center;
  padding: .75em 2em;
}

.btn.btn--icon {
  .btn__body-wrap {
    @apply flex;
  }

  .btn__icon {
    @apply border-l px-4 flex items-center;

    img {
      @apply w-4;
    }
  }

  &.btn--hoveractive:hover .btn__icon {
    svg, i {
      @apply text-white;
      fill: theme('colors.white');
    }
  }
}

.btn.btn--inverted-icon {
  .btn__icon {
    @apply order-first border-r border-l-0;
  }
}

.btn__inline-icon {
  @apply mr-2;
}

.btn.btn--black {
  .btn__body,
  .btn__icon {
    @apply bg-black text-white;
  }

  .btn__icon {
    @apply border-grey-400 bg-grey-800;
  }

  &.btn--hoveractive:hover .btn__body,
  &.btn--hoveractive:hover .btn__icon {
    @apply bg-grey-100 text-black;
  }
  &.btn--hoveractive:hover .btn__icon {
    @apply border-grey-150;

    svg, i {
      @apply text-black;
      fill: theme('colors.black');
    }
  }
}

.btn.btn--grey-125 {
  .btn__body,
  .btn__icon {
    @apply bg-grey-125 text-black;
  }

  .btn__icon {
    @apply border-grey-150;
  }
}

.btn.btn--grey-300 {
  .btn__body,
  .btn__icon {
    @apply bg-grey-300 text-white;
  }

  .btn__icon {
    @apply border-grey-150;
  }
}

.btn.btn--grey-500 {
  .btn__body,
  .btn__icon {
    @apply bg-grey-500 text-white;
  }

  .btn__icon {
    @apply border-grey-300;
  }
}

.btn.btn--grey-700 {
  .btn__body,
  .btn__icon {
    @apply bg-grey-700 text-white;
  }

  .btn__icon {
    @apply border-grey-800;
  }
}

.btn.btn--grey-800 {
  .btn__body,
  .btn__icon {
    @apply bg-grey-800 text-white;
  }

  .btn__icon {
    @apply border-grey-500;
  }
}

.btn.btn--green-100 {
  .btn__body,
  .btn__icon {
    @apply bg-green-100 text-white;
  }

  .btn__icon {
    @apply border-green-200;
  }
}

.btn.btn--red-100 {
  .btn__body,
  .btn__icon {
    @apply bg-red-100 text-white;
  }

  .btn__icon {
    @apply border-red-200;
  }
}

.btn.btn--white {
  .btn__body,
  .btn__icon {
    @apply bg-white text-black;
  }

  .btn__icon {
    @apply border-grey-100;
  }
}

.btn.btn--condensed .btn__body {
  padding: .75em 1em;
}

@responsive {
  .btn.btn--fullwidth {
    @apply w-full max-w-full;

    .btn__body-wrap {
      @apply w-full max-w-full;
    }

    .btn__body {
      flex: 1;
    }
  }

  .btn.btn--autowidth {
    @apply w-auto;
  }
}


.btn.btn--overlay {
  .btn__inline-icon {
    @apply transition duration-200;
  }

  &.btn--overlay-white {
    .btn__inline-icon {
      @apply text-white;
    }

    &:hover {
      .btn__body {
        @apply bg-white text-black;
      }

      .btn__inline-icon {
        @apply text-black;
      }
    }
  }

  &.btn--overlay-red-100 {
    .btn__inline-icon {
      @apply text-red-100;
    }

    &:hover {
      .btn__body {
        @apply bg-red-100;
      }

      .btn__inline-icon {
        @apply text-white;
      }
    }
  }

  &.btn--overlay-brands-facebook {
    .btn__inline-icon {
      @apply text-brands-facebook;
    }

    &:hover {
      .btn__body {
        @apply bg-brands-facebook;
      }

      .btn__inline-icon {
        @apply text-white;
      }
    }
  }
}