/* Button Group */
.buttonGroup {
  @apply flex -mx-2 flex-wrap;
}

.buttonGroup .button {
  @apply m-2;
}

/* Button */
.button {
  @apply font-semibold tracking-wider uppercase text-base border-3 px-2 transition-box-shadow;
}

/* Colors  */
.defaultColor {
  @apply bg-black text-white border-black;
}

.primaryColor {
  @apply bg-primary-400 border-primary-400;
}

.secondaryColor {
  @apply text-white bg-secondary-500 border-secondary-500;
}

/* States */
.button:hover {
  @apply transform -translate-y-0.5 -translate-x-0.5;
}

.button:focus {
  @apply transform -translate-x-px -translate-y-px;
}

.button:disabled {
  @apply cursor-not-allowed pointer-events-none bg-grey-300 text-black border-grey-300;
}

.defaultColor:hover {
  @apply shadow-strong-primary;
}

.defaultColor:focus {
  @apply outline-primary;
}

.primaryColor:hover,
.secondaryColor:hover {
  @apply shadow-strong;
}

.primaryColor:focus,
.secondaryColor:focus {
  @apply outline-default;
}

.outlineColor:hover {
  @apply shadow-strong-secondary;
}

.outlineColor:focus {
  @apply outline-secondary;
}

/* Sizes */
.mediumSize {
  @apply h-8;
}