@import 'page_bundles/mixins_and_variables_and_functions';

.milestones {
  .milestone {
    .progress {
      width: 100%;
      height: 6px;
      margin-bottom: $gl-padding-4;
    }

    .milestone-progress,
    .milestone-release-links {
      a {
        color: var(--blue-600, $blue-600);
      }
    }
  }
}

.milestone-content {
  .issuable-row {
    span {
      a {
        color: var(--gray-900, $gray-900);
        word-wrap: break-word;
      }

      .gl-label-link {
        color: inherit;
      }
    }
  }
}

.milestone-sidebar {
  .milestone-progress {
    .title {
      padding-top: 5px;
    }

    .progress {
      height: 6px;
      margin: 0;
    }

    .sidebar-collapsed-icon {
      clear: both;
      padding: 15px 5px 5px;

      .progress {
        margin: 5px 0;
      }
    }
  }

  .collapsed-milestone-date {
    font-size: 12px;
  }

  .milestone-date {
    display: block;
  }

  .date-separator {
    line-height: 5px;
  }

  .remaining-days strong {
    font-weight: $gl-font-weight-normal;
  }

  .milestone-stat {
    float: left;
    margin-right: 14px;
  }

  .milestone-stat:last-child {
    margin-right: 0;
  }

  .right-sidebar-expanded & {
    .gutter-toggle {
      margin-bottom: $sidebar-milestone-toggle-bottom-margin;
    }
  }

  .right-sidebar-collapsed & {
    .milestone-progress {
      padding-top: 0;
    }

    .reference {
      border-top: 1px solid $border-color;
    }
  }
}

.milestone-issues-list,
.milestone-merge_requests-list {
  .issuable-detail {
    display: block;
    margin-top: 7px;

    .issue-link {
      display: inline-block;
    }

    .issuable-number {
      color: var(--gray-500, $gray-500);
      margin-right: 5px;
    }

    .avatar {
      float: none;
    }

    > a:not(:last-of-type) {
      margin-right: 5px;
    }
  }
}

@include media-breakpoint-down(md) {
  .milestone-actions {
    @include clearfix();
    padding-top: $gl-vert-padding;

    .btn:first-child {
      margin-left: 0;
    }
  }
}

.issuable-row {
  background-color: var(--white, $white);
}

.milestone-popover-instructions-list {
  padding-left: 2em;

  > li {
    padding-left: 1em;
  }
}

@include media-breakpoint-down(xs) {
  .milestone-banner-text,
  .milestone-banner-link {
    display: inline;
  }
}