@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-900;
}

.plex-button {
  @apply flex justify-center w-full px-4 py-2 text-sm font-medium text-center text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md disabled:opacity-50;
  background-color: #cc7b19;
}

.plex-button:hover {
  background: #f19a30;
}

.titleCard {
  @apply relative bg-gray-800 bg-cover rounded-lg;
  padding-bottom: 150%;
}

.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.toast {
  width: 360px;
}

.error-message {
  @apply relative top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center h-screen text-center text-gray-300;
}

/* Used for animating height */
.extra-max-height {
  max-height: 100rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

code {
  @apply px-2 py-1 bg-gray-800 rounded-md;
}