/* Navigation button styles extracted from Tailwind utilities */
.navi-btn {
  position: relative;
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  line-height: 2.5rem; /* vertical center */
  text-align: center; /* horizontal center */
  color: #374151; /* text-gray-700 */
  border-radius: 9999px; /* rounded-full */
  transition: color 200ms ease, background-color 200ms ease, transform 200ms ease-in-out; /* transition-colors & transform */
}

.navi-btn:hover {
  color: #111827; /* hover:text-gray-900 */
  background-color: #ffffff; /* hover:bg-gray-100 */
  transform: scale(1.05);
  opacity: 0.6;
}

.navi-btn:focus {
  outline: none; /* focus:outline-none */
}

.navi-btn:active {
  background-color: #ffffff; /* active background slightly darker */
  opacity: 0.6;
}