[cam-tasklist-task-meta] {
  .meta {
    float: left;
    width: 50%;
    margin: 0 0 (@grid-gutter-width / 3) 0;
    padding: 0;

    > li {
      float: none;
      display: block;
      margin: 0;
      padding: 0;
      width: auto;
      max-width: 100%;
      height: @line-height-computed;
    }

    .claim,
    .unclaim {
      padding: 0;
      border: 0;
    }
  }

  [cam-widget-inline-field] {
    padding-right: 20px;
    margin-right: -20px;
    margin-left: -3px;

    &.inline-editing {
      padding-right: 0;
      margin-right: 0;
    }

    .view-value {
      max-width: 100%;
    }
  }

  .glyphicon-remove {
    vertical-align: top;
  }

  .groups,
  .assignee {
    text-align: right;
  }

  .groups {
    color: @link-color;

    &:hover {
      color: @link-hover-color;
    }

    > span {
      position: relative;

      > .glyphicon,
      > a {
        vertical-align: top;
      }

      a {
        display: inline-block;
        max-width: 100%;
        padding-left: 20px;
        margin-left: -20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .assignee .validating {
    &::before {
      content: '\e031';
      position: absolute;
      color: @gray-light;
      top: 6px;
      right: 4px;
      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- Icon Font */
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      font-size: smaller;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      .animation(~'spin 1s infinite linear');
    }

    input {
      color: @gray-light;
      cursor: wait;
      cursor: progress;
    }
  }
}

// S+
@media (min-width: @screen-sm-min) {
  [cam-tasklist-task-meta] .meta {
    > li {
      float: left;
      width: 50%;
    }
  }
}

// S
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  body {
    &.list-column-close {
      [cam-tasklist-task-meta] .meta {
        > li {
          width: 50%;
        }
      }
    }
  }
}

// M
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  body {
    &.list-column-close {
      [cam-tasklist-task-meta] .meta {
        width: 100%;

        > li {
          width: 50%;
        }
      }
    }
  }
}

@media (min-width: @screen-lg-min) {
  [cam-tasklist-task-meta] .meta {
    > li {
      width: 50%;
    }
  }
}
