@tailwind base;
@tailwind components;

/* popout */

.button {
  @apply bg-white text-gray-800 font-bold py-3 px-3;
}
.icon {
  @apply text-xl;
}
.btn-mastodon {
  @apply hover:bg-blue-200 hover:text-blue-700 active:bg-blue-400;
}
.btn-pleroma {
  @apply hover:bg-yellow-400 hover:text-white active:bg-yellow-500;
}
.btn-diaspora {
  @apply hover:bg-gray-900 hover:text-white active:bg-gray-700;
}
.btn-friendica {
  @apply hover:bg-blue-700 hover:text-yellow-300 active:bg-blue-800;
}
.btn-hubzilla {
  @apply hover:bg-indigo-800 hover:text-white active:bg-indigo-900;
}
.btn-lemmy {
  @apply hover:bg-green-700 hover:text-white active:bg-green-800;
}
.btn-socialhome {
  @apply hover:bg-gray-700 hover:text-green-300 active:bg-gray-800;
}
.btn-gnusocial {
  @apply hover:bg-red-200 hover:text-red-800 active:bg-red-400;
}
.btn-xmpp {
  @apply hover:bg-gray-200 hover:text-green-500 active:bg-gray-300;
}
.btn-options {
  @apply cursor-pointer hover:bg-gray-100 hover:text-black active:bg-gray-300;
}

/* options */

.span-custom {
  @apply text-xl text-blue-700 border border-2 font-bold rounded-l px-4 py-2 bg-white;
}
.text-custom {
  @apply border px-4 py-2 w-full;
}
.checkbox-custom {
  @apply m-3;
}
.btn-save {
  @apply bg-blue-500 text-xl hover:bg-pink-500 active:bg-pink-700 text-white font-bold py-2 px-4 rounded-full w-44 text-center;
}

@tailwind utilities;