$remove-icon-width: 24px;

.task-relations {
  padding-bottom: 1em;

  &.is-narrow .columns {
    display: block;

    .column {
      width: 100%;
    }
  }

  .related-tasks {
    margin-bottom: .75em;

    .title {
      font-size: 1em;
      margin: 0;
    }

    .tasks {
      margin: 0;

      a:not(.remove) {
        width: calc(100% - #{$remove-icon-width});

        .task {
          padding: .5em;
          max-width: 100%;

          .different-list {
            color: lighten($dark, 50);
            width: auto;
          }
        }
      }

      .task .tasktext {
        width: calc(100% - .25rem); // Magic .25rem extra space
      }

      .remove {
        width: $remove-icon-width;
        text-align: center;
      }
    }
  }

  .none {
    font-style: italic;
    text-align: center;
  }
}