.container {
  display: flex;
  justify-content: space-around;
  padding: 8px;
}

.button {
  padding: 10px 14px;
  border: none;
  border-radius: 16px;
  font-weight: 500;
  color: var(--button-secondary);
  background: var(--button-secondary-bg-color);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);

  cursor: pointer;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    transform 0.2s ease;
}

.button:hover {
  background: var(--button-secondary-bg-color-hover);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.selected {
  background: linear-gradient(to bottom, #3b82f6, #2563eb);
  color: white;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.selected:hover {
  background: linear-gradient(to bottom, #2563eb, #1d4ed8);
  transform: translateY(-1px);
}