//
// Issue page
// --------------------------------------------------

.issue {
  @if not $clean-issues {
    &.details {
      padding: $issue-padding;
      border: 1px solid $issue-border;
      border-radius: $border-radius-base;
      background-color: $issue-bg;
      color: $issue-text;
    }
  }

  &.details {
    margin-bottom: $line-height-computed;
    word-wrap: break-word;

    @if $use-gravatars {
      // For Redmine 3.4+
      .gravatar-with-child {
        position: relative;

        > img.gravatar {
          top: 0;
          width: $issue-gravatar-size;
          height: $issue-gravatar-size;
          margin-right: 10px;
          margin-bottom: $line-height-computed / 2;
          float: left;

          &:nth-child(2) {
            position: absolute;
            top: $issue-gravatar-size * .6;
            left: $issue-gravatar-size * .6;
            width: $issue-gravatar-size * .5;
            height: $issue-gravatar-size * .5;
            border: 2px solid rgba(255, 255, 255, .9);
            border-radius: 20%;
          }
        }
      }

      > img.gravatar {
        top: 0;
        width: $issue-gravatar-size;
        height: $issue-gravatar-size;
        margin-right: 10px;
        margin-bottom: $line-height-computed / 2;
        float: left;
      }

      .assigned-to img.gravatar {
        position: relative;
        top: -3px;
        margin-right: 5px;
      }

      > .subject,
      > .author {
        padding-left: $issue-gravatar-size * 1.1 + 10px;
      }
    }

    &.assigned-to-me {
      .assigned-to .user {
        font-weight: $font-weight-bold;
      }
    }

    > .subject {
      h3 {
        margin-bottom: .3em;
        color: $gray-950;
        font-size: $issue-heading-size * 1em;
        font-weight: $font-weight-bold;
        line-height: 1.1;
      }

      p {
        margin-bottom: 5px;
        font-size: $font-size-small;
      }
    }

    > .author {
      margin-bottom: $line-height-computed;
    }

    > hr,
    .attribute > hr {
      @if $clean-issues {
        margin: $issue-padding 0;
      } @else {
        margin: $issue-padding (-$issue-padding);
      }
      border-top-color: $issue-border;
    }

    > .description {
      > p {
        margin-bottom: $issue-padding;
      }

      > .wiki {
        @if $clean-issues {
          margin: 0 0 $issue-padding;
        } @else {
          margin: 0 (-$issue-padding) (-$issue-padding);
          padding: $padding-wiki;
          border-top: 1px solid $issue-border;
          background: $body-bg;
        }
      }
    }

    .next-prev-links {
      margin: 0 0 $line-height-computed;
      float: none;
      color: $gray-600;

      @media screen and (min-width: $screen-md-min) {
        margin: 0;
        float: right;
      }
    }
  }

  @if $color-status {
    .attributes td.status,
    .attributes .attribute.status .value {
      display: inline-block;
      width: auto;
      min-width: 1em;
      margin-top: $issue-attribute-padding-v;
      padding: 1px $table-cell-padding;
      border-radius: $border-radius-base;
      background-color: $status-default-bg;
      color: $status-default-color;
      font-size: $font-size-small;
      font-weight: $font-weight-bold;
      text-align: center;
      text-transform: uppercase;
    }

    @each $status, $status-colors in $status-colors-map {
      &.#{$status} {
        .attributes td.status,
        .attributes .attribute.status .value {
          background-color: map-get($status-colors, background);
          color: map-get($status-colors, color);
        }
      }
    }
  }

  @if $priority-icon {
    .attributes td.priority,
    .attribute.priority .value {
      @include priority-icon-base;
    }
  }

  table.attributes {
    width: 100%;

    th,
    td {
      padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
      text-align: left;
      vertical-align: top;
    }

    > tbody > tr {
      th {
        color: $gray-700;
        font-weight: $font-weight-normal;
      }

      td {
        color: $gray-950;
      }
    }

    @media screen and (min-width: $screen-md-min) {
      > tbody > tr {
        > th {
          width: $label-width;
        }

        > td {
          min-width: $label-width;
        }
      }
    }
  }

  div.attributes {
    @if $css-grid-layout {
      display: grid;
      grid-gap: 0 $padding-side;
      grid-template-columns: auto;

      @media screen and (min-width: $screen-lg-min) {
        grid-template-columns: repeat(2, minmax(auto, max-content));

        .attribute .value {
          min-width: $label-width;
        }
      }

      .splitcontent {
        display: contents;

        &::after {
          content: none;
        }
      }

      .splitcontentleft {
        width: auto;
        padding-right: 0;
        padding-left: 0;
        float: none;
      }
    } @else {
      @media screen and (min-width: $screen-lg-min) {
        .splitcontentleft {
          width: auto;
        }

        .attribute .value {
          min-width: $label-width;
        }
      }
    }
  }

  .splitcontent {
    .attribute {
      padding-left: $label-width;

      .label {
        width: $label-width;
        margin-left: -$label-width;
      }
    }
  }

  .attribute {
    @extend %clearfix;

    .label,
    .value {
      padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
    }

    .label {
      box-sizing: border-box;
      float: left;
      color: $gray-700;
    }

    .value {
      color: $gray-950;

      &:empty::after {
        content: "-";
      }

      *:last-child {
        margin-bottom: 0;
      }
    }
  }

  table.progress {
    width: 80px;
  }

  div.attachments {
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  div.description + div.attachments {
    margin: $issue-padding (-$issue-padding) (-$issue-padding);
    padding: $issue-padding;
    border-top: 1px solid $issue-border;
  }

  // Restore margin below buttons in reverse chronological mode
  + div[style] + .contextual {
    margin-bottom: $line-height-computed;
  }
}

div.fileover {
  background-color: $highlight-bg;
}

div.attachments:not(.box) {
  padding: $line-height-computed 0;
  border-top: 1px solid $issue-border;

  @at-root .collapsible #{&} {
    padding-top: 0;
    border-top: 0;
  }

  p {
    margin: 10px 0 0;
  }

  p:first-child,
  .contextual + p {
    margin-top: 0;
  }

  img {
    position: relative;
    top: -1px;
    vertical-align: middle;
  }

  .delete {
    opacity: $icon-opacity;

    &:hover {
      opacity: $icon-hover-opacity;
    }
  }

  span.author {
    color: $gray-700;
    font-size: $font-size-small;
  }
}

div.thumbnails {
  margin-top: $issue-padding;

  div {
    display: inline;
  }

  a {
    display: inline-block;
    margin-right: 2px;
    border: 1px solid $gray-400;
    border-radius: $border-radius-base;
    background-color: $body-bg;

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

  img {
    top: 0;
    margin: 3px;
    border-radius: $border-radius-base - 1;
    vertical-align: middle;
  }
}

#issue_tree,
#relations {
  > p {
    margin-bottom: 0;
  }

  .issues {
    margin: ($line-height-computed / 2) 0 0;

    tr {
      background-color: transparent;
    }

    tr:last-child > td {
      border-bottom: 0 none;
    }

    td.checkbox {
      display: none;
    }

    td.done_ratio {
      width: 80px;
    }

    td.buttons {
      width: 3em;
      vertical-align: middle;

      a:not(:first-child) {
        margin-left: 2px;
      }
    }
  }
}

#trackers_description {
  display: none;

  dt {
    margin: 0 0 ($line-height-computed / 4);
  }

  dd {
    margin-right: 0;
    margin-left: 0;
  }
}

#new-relation-form {
  text-align: right;

  > p {
    margin-bottom: 0;

    > input {
      margin-right: 5px;
    }
  }
}

#update > form {
  margin-bottom: $line-height-computed;
  padding-bottom: $line-height-computed;
  border-bottom: 1px solid $issue-border;
}

#history {
  > .tabs {
    margin-bottom: $line-height-computed + 2px * 2;
  }

  &.hide-details {
    .journal,
    .details,
    .first-of-notes::before {
      display: none;
    }

    .has-notes {
      display: block;
    }
  }

  &.hide-notes {
    .journal,
    .wiki,
    .first-of-details::before {
      display: none;
    }

    .has-details {
      display: block;
    }
  }
}

.journal {
  position: relative;
  margin-bottom: $line-height-computed;
  border: 1px solid $bubble-border;
  border-radius: $panel-border-radius;

  @if $use-gravatars {
    margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
  }

  &.changeset {
    h4 + p {
      margin-bottom: 0;
      padding-bottom: $bubble-padding-vertical;
      background-color: $bubble-bg;
      font-size: $font-size-list;

      > a:first-child {
        font-family: $font-family-monospace;
        font-weight: $font-weight-bold;
      }
    }
  }

  > div {
    &:target {
      $border: $bubble-target-border;
      $shadow: rgba($bubble-target-border, $bubble-target-shadow-alpha);
      position: relative;
      margin-top: -($responsive-header-height + 4px);
      padding-top: ($responsive-header-height + 4px);

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: ($responsive-header-height + 4px);
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: $panel-border-radius - 1px;
        box-shadow: 0 0 0 1px $border, 0 0 0 4px $shadow;
        pointer-events: none;
      }

      @if $use-gravatars {
        > h4::before {
          border-right-color: $border;
          filter: drop-shadow(-4px 0 0 $shadow);
        }
      }

      @media screen and (min-width: $redmine-responsive-min) {
        margin-top: -$line-height-computed;
        padding-top: $line-height-computed;

        &::before {
          top: $line-height-computed;
        }
      }
    }
  }

  // For Redmine 4.0+
  > div > .contextual,
  > .contextual {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: $bubble-padding-vertical $bubble-padding-horizontal;
    font-size: $font-size-list;

    a {
      opacity: $icon-opacity;

      &:hover {
        opacity: $icon-hover-opacity;
      }
    }

    > a.journal-link {
      padding-left: $issue-attribute-padding-h;
      opacity: 1;
      color: $gray-700;

      &::before {
        content: "";
      }
    }
  }

  > div > h4,
  > h4 {
    margin: 0;
    padding: $bubble-padding-vertical $bubble-padding-horizontal;
    border-radius: $panel-border-radius $panel-border-radius 0 0;
    background-color: $bubble-bg;
    color: $gray-700;
    font-size: $font-size-list;
    font-weight: $font-weight-normal;

    a {
      color: $gray-900;

      &.user {
        font-weight: $font-weight-bold;
      }
    }

    .journal-link {
      color: $gray-700;
    }
  }

  @if $use-gravatars {
    > div > h4,
    > h4 {
      position: relative;

      &::before,
      &::after {
        content: " ";
        display: block;
        position: absolute;
        top: 9px;
        right: 100%;
        left: -14px;
        width: 0;
        height: 0;
        border-style: solid solid outset;
        border-color: transparent;
        pointer-events: none;
      }

      &::after {
        margin-top: 1px;
        margin-left: 2px;
        border-width: 6px;
        border-right-color: $bubble-bg;
      }

      &::before {
        border-width: 7px;
        border-right-color: $bubble-border;
      }

      > .gravatar {
        top: 0;
        margin-top: $line-height-computed - $bubble-gravatar-size;
        margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
        float: left;
      }
    }
  }

  > p {
    padding-right: $bubble-padding-horizontal;
    padding-left: $bubble-padding-horizontal;

    &:empty {
      margin-bottom: 0;
    }
  }

  form,
  .wiki,
  .details {
    border-top: 1px solid $bubble-border;
  }

  .details {
    margin: 0;
    padding: $bubble-padding-vertical 0;
    padding-left: $bubble-padding-horizontal + 20px;
    font-size: $font-size-list;

    img {
      margin: 0 0 -3px 4px;
    }
  }

  .thumbnails {
    margin: 0;
    padding: 0 $bubble-padding-horizontal $bubble-padding-vertical;

    img {
      vertical-align: middle;
    }
  }

  .wiki {
    padding: $issue-padding;
  }

  form {
    padding: $bubble-padding-vertical $bubble-padding-horizontal $bubble-padding-horizontal;
    background-color: $bubble-bg;

    > p {
      margin-bottom: $issue-padding;

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

    > label {
      display: inline-block;
      margin-bottom: $line-height-computed / 2;
      line-height: $line-height-base;
    }

    > .wiki {
      margin: 0 (-$issue-padding) (-$issue-padding);
      padding: 0;
      border: 0 none;

      .preview {
        padding: $issue-padding;
      }
    }
  }

  i {
    &:first-of-type,
    &:last-of-type {
      padding: 2px 4px;
      border-radius: $border-radius-small;
      font-size: .9285em;
      font-style: normal;
    }
  }

  del > i:first-of-type,
  i:first-of-type {
    background-color: $journal-old-value-bg;
    color: $journal-old-value-color;
  }

  i:last-of-type {
    background-color: $journal-new-value-bg;
    color: $journal-new-value-color;
  }
}

.private-notes {
  border-left-color: $brand-warning;

  > div > h4::before {
    border-right-color: $brand-warning;
  }
}

#activity dt,
.journal {
  clear: left;
}

.journal-link {
  float: right;
}

span.private {
  padding: $tracker-inline-padding;
  border-radius: $border-radius-small;
  background: $brand-warning;
  color: $brand-text;
  font-size: $font-size-small;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

#issue-changesets {
  margin-bottom: $line-height-computed;

  @media screen and (min-width: $screen-md-min) {
    width: 45%;
    float: right;

    + #history {
      margin-right: 45%;
      padding-right: $padding-side;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    width: 33%;

    + #history {
      margin-right: 33%;
    }
  }

  div.changeset {
    margin-top: $line-height-computed / 2 + 2px * 2;
    padding: 0;
    overflow: hidden;
    border: 1px solid $bubble-border;
    border-radius: $panel-border-radius;
    background-color: $bubble-bg;
    font-size: $font-size-list;

    &:first-of-type {
      margin-top: 0;
    }

    > p {
      @include clearfix;
      margin: 0;
      padding: $padding-base-vertical $padding-base-horizontal;
      color: $gray-700;

      > a:first-child {
        font-family: $font-family-monospace;
        font-weight: $font-weight-bold;
      }

      .author a {
        color: $gray-900;

        &.user {
          font-weight: $font-weight-bold;
        }
      }

      > br {
        display: none;
      }
    }

    > .wiki {
      padding: $padding-base-vertical $padding-base-horizontal;
      border-top: 1px solid $bubble-border;
      background-color: $body-bg;
    }
  }
}
