@import "tailwindcss";

.leaderboard-container {
  @apply flex items-end justify-center gap-3;
}

.leaderboard-scroll {
  @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-[475px] relative;
}

.leaderboard-entry {
  @apply flex items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
}

.leaderboard-entry p.score {
  @apply font-mono text-blue-500 text-lg;
}

.side-dropdown {
  @apply flex items-end min-w-[52px];
}

.dropdown-root {
  @apply relative w-max;
}

.dropdown-btn {
  @apply px-3 py-2 rounded-md bg-[#242424] disabled:bg-[#161616] border border-[#484848] disabled:border-[#383838] text-gray-200 hover:bg-[#323232] hover:border-[#565656] transition-colors cursor-pointer;
}

.dropdown-menu {
  @apply absolute bottom-full mb-2 w-55 bg-[#242424] border border-[#484848] rounded-md shadow-lg hidden z-50;
}

.dropdown-left .dropdown-menu {
  @apply left-0;
}

.dropdown-right .dropdown-menu {
  @apply right-0 w-42;
}

.dropdown-menu.open {
  @apply block;
}

.dropdown-item {
  @apply block w-full text-left px-4 py-2 hover:bg-[#323232] text-gray-200 cursor-pointer;
}

.dropdown-item.selected {
  @apply bg-[#323232] hover:bg-[#484848];
}
