/* ########################
    Mode-based Styles
########################## */

/* Background color for each mode */
body.work-mode {
  background-color: var(--color-task);
}

body.short-break-mode {
  background-color: var(--color-short);
}

body.long-break-mode {
  background-color: var(--color-long);
}

/* Change task container background & border per mode */
body.work-mode #change-task {
  background-color: var(--color-task-dark);
  border: 1px solid var(--color-task-light);
}

body.short-break-mode #change-task {
  background-color: var(--color-short-dark);
  border: 1px solid var(--color-short-light);
}

body.long-break-mode #change-task {
  background-color: var(--color-long-dark);
  border: 1px solid var(--color-long-light);
}

/* Change task creation div background & border per mode */
body.work-mode #task-creation-div {
  background-color: var(--color-task);
  border: 1px solid var(--color-task-light);
}

body.short-break-mode #task-creation-div {
  background-color: var(--color-short);
  border: 1px solid var(--color-short-light);
}

body.long-break-mode #task-creation-div {
  background-color: var(--color-long);
  border: 1px solid var(--color-long-light);
}

/* Change task item background & border per mode */
body.work-mode .task-item {
  background-color: var(--color-task);
  border: 1px solid var(--color-task-light);
}

body.short-break-mode .task-item {
  background-color: var(--color-short);
  border: 1px solid var(--color-short-light);
}

body.long-break-mode .task-item {
  background-color: var(--color-long);
  border: 1px solid var(--color-long-light);
}

/* Change footer background per mode */

body.work-mode footer {
  background-color: rgba(183, 23, 23, 0.3);
}

body.short-break-mode footer {
  background-color: rgba(23, 215, 198, 0.3);
}

body.long-break-mode footer {
  background-color: rgba(23, 163, 215, 0.3);
}

/* buttons  */

body.work-mode button:hover {
  background-color: var(--color-task-dark);
}

body.short-break-mode button:hover {
  background-color: var(--color-short-dark);
}

body.long-break-mode button:hover {
  background-color: var(--color-long-dark);
}

body.work-mode #btn-configuration {
  background-color: var(--color-task-light);
}

body.short-break-mode #btn-configuration {
  background-color: var(--color-short-light);
}

body.long-break-mode #btn-configuration {
  background-color: var(--color-long-light);
}

body.work-mode #btn-work {
  background-color: var(--color-task-dark);
}

body.short-break-mode #btn-short-break {
  background-color: var(--color-short-dark);
}

body.long-break-mode #btn-long-break {
  background-color: var(--color-long-dark);
}

body.work-mode #btn-play-pause {
  color: var(--text-task);
}

body.short-break-mode #btn-play-pause {
  color: var(--text-short);
}

body.long-break-mode #btn-play-pause {
  color: var(--text-long);
}