/* MyTasked Tasks layout and interaction refinements. */

html body #root
main.mt-app-shell.mt-tasks-screen
.mt-tasks-common-heading-section {
  margin: 4px 16px 0 !important;
}

html body #root
main.mt-app-shell.mt-tasks-screen
.mt-tasks-common-filter-menu.is-upward {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  transform-origin: right bottom !important;
}

html body #root
main.mt-app-shell.mt-tasks-screen
.mt-tasks-common-filter-menu:not(.is-upward) {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  transform-origin: right top !important;
}

html body #root
main.mt-app-shell.mt-tasks-screen
button.mt-tasks-hot-task-more {
  color: var(
    --mt-text-secondary,
    rgba(248, 247, 245, 0.62)
  ) !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #root
  main.mt-app-shell.mt-tasks-screen
  button.mt-tasks-hot-task-more:hover {
    color: var(--mt-text-primary, #f8f7f5) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@media (max-width: 360px) {
  html body #root
  main.mt-app-shell.mt-tasks-screen
  .mt-tasks-common-heading-section {
    margin: 3px 12px 0 !important;
  }
}