.design-image {
  object-fit: contain;
}

.design-detail {
  overflow-y: scroll;
}

.image-notes {
  overflow-y: scroll;
  padding: 0 $gl-padding;
  padding-top: 50px;
  background-color: $white-light;
  min-width: 400px;

  li {
    list-style: none;
  }

  .badge.badge-pill {
    margin-left: $gl-padding;
    background-color: $blue-400;
    color: $white-light;
    border: $white-light 1px solid;
    min-height: 28px;
    padding: 7px 10px;
    border-radius: $gl-padding;
  }

  .design-discussion {
    padding: $gl-padding 0;
    margin: $gl-padding 0;

    &::before {
      content: '';
      border-left: 1px solid $gray-200;
      position: absolute;
      left: 28px;
      top: -18px;
      height: 18px;
    }

    .design-note {
      padding: $gl-padding;

      a {
        color: inherit;
      }
    }

    .reply-wrapper {
      padding: $gl-padding;
      padding-bottom: 0;
    }
  }

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

  .new-discussion-disclaimer {
    line-height: 20px;
  }
}

@media (max-width: map-get($grid-breakpoints, sm)) {
  .design-detail {
    overflow-y: scroll;
  }

  .image-notes {
    overflow-y: auto;
    min-width: 100%;
  }
}
