@import (reference) "variables";
@import (reference) "mixins";
@import (reference) "ui";

@sideWidth: 300px;


.issues {

  &.sticky {

    .issues-workspace-list,
    .issues-workspace-component-viewer {
      padding-top: 22px + 5px + 5px + 1px + 10px;
    }

  }
}

.issues-workspace-list-component {
  line-height: 1.5;
}

.issues-workspace-list-component + .issue {
  margin-top: 10px;
}

.issue + .issues-workspace-list-component {
  margin-top: 25px;
}

.issues-workspace-list-component-part {
  margin-right: 10px;
  border-bottom: none;
}

.issues-workspace-component-viewer {
  display: none;
  padding: 1px 10px;
  min-height: 100vh;

  .code-issue-modern {
    margin: 5px 0;
  }
}

.issues-workspace-component-viewer-header {
  position: relative;
}

.issues-workspace-component-viewer-close {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -8px;
}

.issues-extended-view {

  .search-navigator-workspace-list {
    display: none;
  }

  .issues-workspace-component-viewer {
    display: block;
  }
}

.issues-header-component {
  padding-left: 10px;
}

.issue-box {
  .clearfix;
  outline: 1px solid @barBorderColor;
  border-left: 2px solid transparent;
  overflow: hidden;

  &.selected {
    outline-color: @blue;
    border-color: @blue;
  }

  .code-issue {
    border: none;
    outline: none;
  }
}

.issue-box + .issue-box {
  margin-top: 12px;
}

.issue-box-details {

}

.code-issue-modern {
  outline: 1px solid @barBorderColor;
  border-left: 2px solid transparent;

  .code-issue-name,
  .code-issue-actions,
  .code-issue-details,
  .code-issue-comment {
    border: none;
    background: transparent;
  }

  &.selected {
    outline-color: @blue;
    border-color: @blue;
  }
}

.issue-box-snippet {
  padding: 3px 0;
  overflow: hidden;
  cursor: pointer;

  .code {
    border: none;
  }
}

.issue-box-component {
  padding: 5px;
}

.code .has-issues > pre {
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  background-size: 4px;
  background-position: bottom;
}