.tasks {
  margin-top: 1rem;
  padding: 0;
  text-align: left;

  @media screen and (min-width: $tablet) {
    &.short {
      max-width: 53vw;
    }
  }

  @media screen and (max-width: $tablet) {
    max-width: 100%;
  }

  &.noborder {
    margin: 1rem -0.5rem;
  }

  .task {
    display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid darken(#fff, 10%);
    transition: background-color $transition;

    &:hover {
      background-color: darken($light-background, 3);
    }

    span:not(.tag) {
      width: 100%;
      display: inline-block;
      cursor: pointer;

      .tasktext,
      &.tasktext {
        vertical-align: top;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        max-width: calc(#{$desktop} - 27px - 2rem); // The max width of the outer container minus the padding
        width: calc(100% - 2rem); // The max width of the outer container minus the padding

        @media screen and (max-width: $desktop) {
          max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
        }

        .overdue {
          color: $red;
        }

        .task-list {
          width: auto;
          color: lighten($grey, 25%);
          font-size: .9em;
          vertical-align: text-bottom;
        }
      }

      .fancycheckbox span {
        display: none;
      }

      .tag {
        margin: 0 0.5em;
      }

      .avatar {
        border-radius: 50%;
        vertical-align: bottom;
        margin-left: 5px;
        height: 27px;
        width: 27px;
      }

      a {
        color: $text;
        transition: color ease $transition-duration;

        &:hover {
          color: darken($text, 40%);
        }
      }
    }

    .tasktext.done {
      text-decoration: line-through;
      color: $grey;
    }

    span.parent-tasks {
      color: lighten($dark, 50);
      width: auto;
    }

    .remove {
      color: $red;
    }

    input[type="checkbox"] {
      vertical-align: middle;
    }

    .settings {
      float: right;
      width: 24px;
      cursor: pointer;
    }
  }

  .task:last-child {
    border-bottom: none;
  }
}

.is-menu-enabled .tasks .task span:not(.tag) {
  .tasktext, &.tasktext {
    @media screen and (max-width: $desktop) {
      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
    }

    // Duplicated rule to have it work properly in at least some browsers
    // This should be fine as the ui doesn't work in rare edge cases to begin with
    @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
    }
  }
}

.taskedit {
  min-height: calc(100% - 1rem);
  margin-top: 1rem;


  .priority-select {
    .select, select {
      width: 100%;
    }
  }

  ul.assingees {
    list-style: none;
    margin: 0;

    li {
      padding: 0.5em 0.5em 0;

      a {
        float: right;
        color: $red;
        transition: all $transition;

        &:hover {
          color: darken($red, 15);
        }
      }
    }
  }

  .tag {
    margin-right: 0.5em;
    margin-bottom: 0.5em;

    &:last-child {
      margin-right: 0;
    }
  }
}

.show-tasks {
  h3 {
    text-align: left;

    &.nothing {
      text-align: center;
      margin-top: 3em;
    }

    .input {
      width: 190px;
      vertical-align: middle;
      margin: .5rem 0;
    }
  }

  img {
    margin-top: 2em;
  }

  .spinner.is-loading:after {
    margin-left: calc(40% - 1em);
  }
}