/* ########################
    Buttons
########################## */

/* Base button */
button,
#task-creation-div button,
#edit-tasks button {
  font-family: inherit;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition);
}

button {
  background-color: #444;
  color: white;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

/* Play/Pause */
#btn-play-pause {
  background-color: white;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  transition: color 0.3s ease;
}

/* Config Button */
#btn-configuration {
  color: white;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

/* Edit Task Buttons */
#edit-tasks button {
  background-color: var(--color-short-break, #1976d2);
  color: white;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

/* Delete/Save buttons inside task */
#task-creation-div button {
  background: none;
  color: white;
  font-size: 1.2rem;
}

/* Hover States */
button:hover {
  background-color: var(--color-task-dark);
}

#edit-tasks button:hover {
  background-color: var(--color-short-break-dark, #1565c0);
}