/* short break color modes */
.short-break {
  background-color: var(--page-bg-color-short);
  transition-duration: var(--theme-transi-dura);
}

.short-break nav {
  background-color: var(--header-color-short);
  transition-duration: var(--theme-transi-dura);
}

.short-break table {
  background-color: var(--table-bg-color-short);
  transition-duration: var(--theme-transi-dura);
}

.short-break th {
  background-color: var(--header-color-short);
  transition-duration: var(--theme-transi-dura);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break tr:nth-child(even) td,
.long-break tr:nth-child(odd) td,
.long-break nav i {
  color: var(--font-color-long);
}

.short-break tr:nth-child(even) td,
.short-break tr:nth-child(odd) td {
  color: var(--font-color-short);
}

.short-break tr:nth-child(even) td,
.short-break #tasklist::-webkit-scrollbar-thumb {
  background-color: var(--even-color-short);
}

.short-break tr:nth-child(odd) td {
  background-color: var(--odd-color-short);
}

.short-break tr:hover td {
  background-color: var(--tr-hover-color);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break tr:nth-child(odd) td,
.long-break tr:nth-child(even) td {
  background-color: var(--even-color-long);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break tr:hover td {
  background-color: var(--tr-hover-color);
}

.short-break tr.uncheckedTask:nth-child(2) td {
  background-color: var(--current-task-color);
}

.short-break #add-todo {
  background-color: var(--header-color-short);
  transition-duration: var(--theme-transi-dura);
}

.short-break .btn,
.short-break .btn-large,
.short-break .btn-floating {
  background-color: var(--btn-icon-color-short);
}

.short-break .main-page,
.short-break nav .brand-logo,
.short-break .btn,
.short-break .pure-button,
.short-break #startTimer,
.short-break #finishTask,
.short-break .close,
.short-break .modal-header,
.short-break .modal-footer,
.short-break th,
.short-break nav i,
.short-break nav [class^="mdi-"],
.short-break nav [class*="mdi-"],
.short-break nav i.material-icons,
.short-break a,
.short-break #submit-button,
.short-break .btn-floating i {
  color: var(--font-color-short);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break .btn,
.long-break .btn-large,
.long-break .btn-floating {
  background-color: var(--btn-icon-color-long);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break .main-page,
.long-break nav .brand-logo,
.long-break .btn,
.long-break .pure-button,
.long-break #startTimer,
.long-break #finishTask,
.long-break .close,
.long-break .modal-header,
.long-break .modal-footer,
.long-break th,
.long-break nav [class^="mdi-"],
.long-break nav [class*="mdi-"],
.long-break nav i.material-icons,
.long-break a,
.long-break #submit-button,
.long-break .btn-floating i {
  color: var(--font-color-long);
}

/* DARK MODE! (for style check in lint) */
.dark-mode .btn,
.dark-mode .btn-large,
.dark-mode .btn-floating {
  background-color: rgb(78, 78, 78);
}

.short-break .btn:hover,
.short-break .btn-large:hover,
.short-break .btn-floating:hover {
  background-color: var(--btn-icon-hover-color-short);
}

.short-break .modal-content {
  background-color: var(--page-bg-color-short);
  border: 3px solid var(--header-color-short);
  box-shadow: 0 4px 8px 0 var(--header-color-short), 0 6px 20px 0 var(--header-color-short);
}

.short-break .modal-header,
.short-break .modal-footer {
  background-color: var(--header-color-short);
}

/* LONG BREAK MODE! (for style check in lint) */
.long-break .distractFormButton {
  color: var(--page-bg-color-long);
}

.short-break .statslabel,
.short-break .tab-btn-active,
.short-break .tab-btn,
.short-break .stats-info,
.short-break .distractFormButton,
.short-break .distractFormButton:hover,
.short-break .distractFormButton:focus {
  color: var(--page-bg-color-short);
}

.short-break #parentDiv::-webkit-scrollbar-thumb {
  background-color: var(--page-bg-color-short);
}

.short-break button:focus {
  background-color: var(--btn-icon-color-short);
}

.short-break .triple-dots-touch button,
.short-break .double-buttons button {
  color: var(--font-color-short);
}

/* long break color modes */

/* Note: there are some long break color modes settings above for passing the style check in lint */
.long-break {
  background-color: var(--page-bg-color-long);
  transition-duration: var(--theme-transi-dura);
}

.long-break nav {
  background-color: var(--header-color-long);
  transition-duration: var(--theme-transi-dura);
}

.long-break table {
  background-color: var(--table-bg-color-long);
  transition-duration: var(--theme-transi-dura);
}

.long-break th {
  background-color: var(--header-color-long);
  transition-duration: var(--theme-transi-dura);
}

.long-break #tasklist::-webkit-scrollbar-thumb {
  background-color: var(--even-color-long);
}

.long-break tr.uncheckedTask:nth-child(2) td {
  background-color: var(--current-task-color);
}

.long-break #add-todo {
  background-color: var(--header-color-long);
  transition-duration: var(--theme-transi-dura);
}

.long-break .btn:hover,
.long-break .btn-large:hover,
.long-break .btn-floating:hover {
  background-color: var(--btn-icon-hover-color-long);
}

.long-break .modal-content {
  background-color: var(--page-bg-color-long);
  border: 3px solid var(--header-color-long);
  box-shadow: 0 4px 8px 0 var(--header-color-long), 0 6px 20px 0 var(--header-color-long);
}

.long-break .modal-header,
.long-break .modal-footer {
  background-color: var(--header-color-long);
}

.long-break .statslabel,
.long-break .tab-btn-active,
.long-break .tab-btn,
.long-break .stats-info,
.long-break .distractFormButton:hover,
.long-break .distractFormButton:focus {
  color: var(--page-bg-color-long);
}

.long-break #parentDiv::-webkit-scrollbar-thumb {
  background-color: var(--page-bg-color-long);
}

.long-break button:focus {
  background-color: var(--btn-icon-color-long);
}

.long-break .triple-dots-touch button,
.long-break .double-buttons button {
  color: var(--font-color-long);
}

/* distraction popup animations */
#overlay {
  position: fixed;
  left: 0;
  top: 0;
  background-color: black;
  display: none;
  height: 100vh;
  width: 100vw;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  margin: 0;
  z-index: 50;
}

/* change the distration-animation scalr from 0-0.8 to 0-1 for better visuals */
@keyframes distraction-animation-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes overlay-animation-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes distraction-animation-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes overlay-animation-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* dark mode */

/* Note: there are some dark mode settings above for passing the style check in lint */

.dark-mode .btn:focus,
.dark-mode .btn-large:focus {
  background-color: rgb(78, 78, 78);
}

.dark-mode .btn:hover,
.dark-mode .btn-large:hover,
.dark-mode .btn-floating:hover {
  background-color: #b2b2b2;
}