$item-path-max-width: 160px;
$item-milestone-max-width: 120px;
$item-weight-max-width: 48px;
$item-remove-button-space: 42px;

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

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

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

  .sortable-link {
    white-space: normal;
  }

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

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

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

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

  .item-title-wrapper {
    max-width: calc(100% - #{$item-remove-button-space});
  }

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

    .sortable-link {
      color: $gray-900;
    }
  }

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

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

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

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

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

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

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

  .related-items-tree & {
    position: relative;
    top: initial;
    padding: $btn-sm-side-margin;
    margin-right: initial;
  }

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

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

@include media-breakpoint-down(xs) {
  .btn-sm.dropdown-toggle-split {
    max-width: 40px;
  }
}

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

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

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

/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
  .related-items-tree .item-contents,
  .item-body .item-title {
    max-width: 100%;
  }

  .sortable-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

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

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

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

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

  .item-contents {
    overflow: hidden;
  }

  .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;
    padding: $btn-sm-side-margin;
    margin-right: $gl-padding-4 / 2;
  }

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

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

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

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