body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: #00000099;
  line-height: 1.5;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.filter-item.selected {
  background-color: rgba(0, 122, 255, 0.05);
  color: #007aff;
  font-weight: 500;
  border-radius: 0.5rem;
}

.filter-item .done-icon {
  display: none;
}

.filter-item.selected .done-icon {
  display: inline-block;
}

@layer utilities {
  .custom-scroll::-webkit-scrollbar {
    width: 6px; /* ширина скролу */
  }

  .custom-scroll::-webkit-scrollbar-track {
    background: transparent; /* фон під скролом */
  }

  .custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* сам бігунок */
    border-radius: 9999px; /* робимо його круглим */
  }

  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* при ховері темніше */
  }
}

button {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, fill 0.3s ease;
  cursor: pointer;
}