.btn {
  @apply px-4 py-2 flex items-center justify-center rounded-lg whitespace-nowrap  cursor-pointer  transition-colors duration-200;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.2);

  > svg,img {
    display: inline-block;
  }
}

.btn-primary {
  @apply bg-primary-500 text-white hover:bg-primary-700 ring-1 ring-primary-600 inset-shadow-2xs inset-shadow-primary-200/50;
}

.btn-accent {
  @apply bg-accent-500 hover:bg-gradient-to-br hover:from-accent-600 hover:via-accent-400 hover:to-accent-600 text-white ring-1 ring-accent-600 inset-shadow-2xs inset-shadow-accent-100/50;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white ring-red-600 inset-shadow-red-100/50;
  &:hover {
    @apply bg-red-600;
  }
}

.btn-light {
  @apply bg-white text-primary-500 hover:bg-gray-100;
  text-shadow: none;
}

.btn-outline {
  @apply bg-white text-primary-500 hover:bg-gray-100 border border-primary-500 border-2;
}