$remove-icon-width: 24px;

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

    .column {
      width: 100%;
    }
  }

  .different-list {
    color: $grey-500;
    width: auto;
  }

  .related-tasks {
    .title {
      font-size: 1rem;
      margin: 0;
    }

    .tasks {
      margin: 0;

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

      .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;
  }
}