/* Task lists item */
.task-lists-item {
  transition: background-color 0.2s;
}

.task-lists-item:drop(active) {
  background-color: @blue_1;
}

/* Task */

.task-title:drop(active) {
  border-radius: 10px;
}

.tasks-list:last-child {
  margin-bottom: 36px;
}

.task {
  margin: 6px 12px 6px 12px;
  background-color: alpha(@card_bg_color, 0.5);
}

.task-expand-icon {
  transition: transform 0.25s;
}

.task-drop-area {
  padding: 6px;
  margin: 0px 0px 12px 0px;
  border-radius: 10px;
  border-width: 3px;
  border-style: dotted;
  border-color: @light_4;
}

.task-drop-target:drop(active) {
  border-radius: 10px;
}

.task-completed box.title {
  opacity: 0.5;
}

.task-completed label.title {
  text-decoration: line-through;
}

.task-toolbar-btn {
  all: unset;
  opacity: 0.7;
  font-size: 12px;
  padding: 4px;
  border-radius: 6px;
  transition: 0.2s;
}

.task-toolbar-btn:hover {
  background-color: @shade_color;
}

/* Task accent colors */

.task-blue {
  background: #dde9f7;
}

.task-green {
  background: #daf7e0;
}

.task-yellow {
  background: #faf7cf;
}

.task-orange {
  background: #fce8d0;
}

.task-red {
  background: #f9ccc7;
}

.task-purple {
  background: #f1d8f1;
}

.task-brown {
  background: #ece2da;
}

/* Accent colors buttons */

.accent-color-btn {
  transition: 0.25s;
}

.accent-color-btn:hover {
  filter: brightness(1.2);
}

.btn-blue {
  background: @blue_1;
}

.btn-green {
  background: @green_1;
}

.btn-yellow {
  background: @yellow_1;
}

.btn-orange {
  background: @orange_1;
}

.btn-red {
  background: @red_1;
}

.btn-purple {
  background: @purple_1;
}

.btn-brown {
  background: @brown_1;
}

/* Sub-task */

.sub-tasks:last-child {
  margin-bottom: 6px;
}

.sub-task {
  margin: 6px 11px 6px 11px;
  background-color: alpha(@card_bg_color, 0.5);
}

/* Calendar */
calendar {
  background: @background;
}

calendar,
calendar header {
  border: none;
}

/* Utils */

.rounded-corners {
  border-radius: 12px;
}

.transparent {
  background-color: transparent;
}

.fade {
  transition: 0.2s;
}

.rotate {
  transform: rotate(180deg);
}

/* Expand indicator */

.expand-indicator {
  transition: 0.2s;
}

.expand-indicator-expanded {
  transform: rotate(180deg);
}

progressbar.osd {
  background-color: @shade_color;
}

.secret-notes-progressbar progressbar {
  background-color: @shade_color;
}

.secret-notes-progressbar progress {
  background-image: none;
  background-color: @red_1;
}

.secret-note {
  background-color: @card_bg_color;
}

textview text {
  background-color: @card_bg_color;
}