@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 */

.title-options {
  @apply text-4xl text-center px-2 py-4 text-white;
}
.form-options {
  @apply flex mb-4 gap-5;
}
.body-options {
  @apply bg-fixed px-2 py-3 bg-gray-400;
}
.span-custom {
  @apply text-xl text-green-300 border-2 font-bold rounded-l px-4 py-2 m-1 w-1/2 bg-gray-800 border-transparent;
}
.text-custom {
  @apply border px-4 py-2 m-1 ml-0 w-full border-2 border-transparent bg-gray-600 text-white;
}
.checkbox-custom {
  @apply m-3;
}
.btn-save {
  @apply bg-green-500 text-xl hover:bg-green-700 active:bg-blue-700 text-white font-bold py-2 px-4 m-1 rounded w-48 text-center;
}

@tailwind utilities;