$item-path-max-width: 160px;
$item-milestone-max-width: 120px;
$item-weight-max-width: 48px;

.related-items-list {
  padding: $gl-padding-4;

  &,
  .list-item:last-child {
    margin-bottom: 0;
  }
}

.sortable-link {
  max-width: 85%;
}

.related-items-tree {
  .card-header {
    .gl-label {
      line-height: $gl-line-height;
    }
  }
}

.item-body {
  position: relative;
  line-height: $gl-line-height;

  .issue-token-state-icon-open {
    color: $green-500;
  }

  .issue-token-state-icon-closed {
    color: $blue-500;
  }

  .merge-request-status.closed {
    color: $red-500;
  }

  .issue-token-state-icon-open,
  .issue-token-state-icon-closed,
  .confidential-icon,
  .item-milestone .icon,
  .item-weight .board-card-info-icon {
    min-width: $gl-padding;
    cursor: help;
  }

  .issue-token-state-icon-open,
  .issue-token-state-icon-closed {
    margin-right: $gl-padding-4;
  }

  .confidential-icon {
    color: $orange-600;
  }

  .item-title-wrapper {
    max-width: 100%;
  }

  .item-title {
    flex-basis: 100%;
    font-size: $gl-font-size-small;

    &.mr-title {
      font-weight: $gl-font-weight-bold;
    }

    .issue-token-state-icon-open,
    .issue-token-state-icon-closed {
      display: none;
    }
  }

  .item-path-id .path-id-text,
  .item-milestone .milestone-title,
  .item-due-date,
  .item-weight .board-card-info-text {
    color: $gl-text-color-secondary;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  @include media-breakpoint-down(lg) {
    .issue-count-badge {
      padding-left: 0;
    }
  }
}

.item-body,
.card-header {
  .health-label-short {
    display: initial;
    max-width: 0;
  }

  .health-label-long {
    display: none;
  }

  .status {
    &-at-risk {
      color: $red-500;
      background-color: $red-100;
    }

    &-needs-attention {
      color: $orange-700;
      background-color: $orange-100;
    }

    &-on-track {
      color: $green-600;
      background-color: $green-100;
    }
  }

  .gl-label-text {
    font-weight: $gl-font-weight-bold;
  }

  .bullet-separator {
    font-size: 9px;
    color: $gray-400;
  }
}

.item-meta {
  flex-basis: 100%;
  font-size: $gl-font-size;
  color: $gl-text-color-secondary;

  .item-due-date,
  .board-card-weight {
    &.board-card-info {
      margin-right: 0;
    }
  }

  .item-attributes-area {
    > * {
      margin-left: 8px;
    }

    @include media-breakpoint-down(sm) {
      margin-left: -8px;
    }
  }

  .item-milestone,
  .item-weight {
    cursor: help;
  }

  .item-milestone {
    text-decoration: none;
    max-width: $item-milestone-max-width;

    .ic-clock {
      color: $gl-text-color-secondary;
      margin-right: $gl-padding-4;
    }
  }

  .item-weight {
    max-width: $item-weight-max-width;

    .ic-weight {
      color: $gl-text-color-secondary;
    }
  }

  .item-due-date .ic-calendar {
    color: $gl-text-color-secondary;
  }
}

.item-assignees {
  .user-avatar-link {
    margin-right: -$gl-padding-4;

    &:nth-of-type(1) {
      z-index: 2;
    }

    &:nth-of-type(2) {
      z-index: 1;
    }

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

  .avatar {
    height: $gl-padding;
    width: $gl-padding;
    margin-right: 0;
    vertical-align: bottom;
  }

  .avatar-counter {
    height: $gl-padding;
    border: 1px solid transparent;
    background-color: $gl-text-color-tertiary;
    font-weight: $gl-font-weight-bold;
    padding: 0 $gl-padding-4;
    line-height: $gl-padding;
  }
}

.item-path-id {
  font-size: $gl-font-size-xs;
  white-space: nowrap;

  .path-id-text {
    font-weight: $gl-font-weight-bold;
    max-width: $item-path-max-width;
  }

  .issue-token-state-icon-open,
  .issue-token-state-icon-closed {
    display: block;
  }
}

.btn-item-remove {
  position: absolute;
  right: 0;
  top: $gl-padding-4 / 2;
  padding: $gl-padding-4;
  margin-right: $gl-padding-4 / 2;
  line-height: 0;
  border-color: transparent;
  color: $gl-text-color-secondary;

  &:hover {
    color: $gl-text-color;
  }
}

.mr-status-wrapper,
.mr-ci-status {
  line-height: 0;
}

@include media-breakpoint-up(sm) {
  .item-info-area {
    flex-basis: 100%;
  }

  .sortable-link {
    max-width: 90%;
  }

  .item-body,
  .card-header {
    .health-label-short {
      max-width: 30px;
    }
  }
}

/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
  .sortable-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

  .item-body {
    .item-contents {
      min-width: 0;
    }

    .item-title {
      flex-basis: unset;
      // 95% because we compensate
      // for remove button which is
      // positioned absolutely
      width: 95%;
    }

    .btn-item-remove {
      order: 1;
    }
  }

  .item-meta {
    .item-meta-child {
      flex-basis: unset;

      ~ .item-assignees {
        margin-left: $gl-padding-4;
      }
    }
  }

  .item-body,
  .card-header {
    .health-label-short {
      max-width: 60px;
    }
  }
}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(lg) {
  .item-body {
    .item-title {
      font-size: $gl-font-size;
    }

    .item-meta .item-path-id {
      font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
    }
  }

  .item-body,
  .card-header {
    .health-label-short {
      max-width: 100px;
    }
  }

  .health-label-long {
    display: none;
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(xl) {
  .item-body {
    .item-title {
      min-width: 0;
      width: auto;
      flex-basis: auto;
      flex-shrink: 1;
      font-weight: $gl-font-weight-normal;

      .issue-token-state-icon-open,
      .issue-token-state-icon-closed {
        display: block;
        margin-right: $gl-padding-8;
      }
    }

    .item-title-wrapper {
      max-width: calc(100% - 440px);
    }

    .item-info-area {
      flex-basis: auto;
    }
  }

  .health-label-short {
    display: initial;
  }

  .health-label-long {
    display: none;
  }

  .item-contents {
    overflow: hidden;
  }

  .item-meta {
    flex: 1;
  }

  .item-assignees {
    .avatar {
      height: $gl-padding-24;
      width: $gl-padding-24;
    }

    .avatar-counter {
      height: $gl-padding-24;
      min-width: $gl-padding-24;
      line-height: $gl-padding-24;
      border-radius: $gl-padding-24;
    }
  }

  .btn-item-remove {
    position: relative;
    top: initial;
    right: 0;
    padding: $btn-sm-side-margin;

    &:hover {
      border-color: $border-color;
    }
  }

  .sortable-link {
    line-height: 1.3;
  }
}

@media only screen and (min-width: 1400px) {
  .card-header,
  .item-body {
    .health-label-short {
      display: none;
    }

    .health-label-long {
      display: initial;
    }
  }

  .item-body .item-title-wrapper {
    max-width: calc(100% - 570px);
  }
}