@import "bootstrap/less/mixins.less";

.command-panel {
  background-color: #1b1c1e;
  color: #dedede;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 10px;

  .btn {
    .btn-pseudo-states(#19191a, #1a1b1c);
    color: #969696;
  }
}

.command-panel .header {
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  margin-bottom: 0;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.command-panel .preview-list {
  background-color: #19191b;
  color: #6d736f;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.command-panel .preview-count {
  color: #969696;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
}

.command-panel .expand-collapse {
  color: #969696;
}

.command-panel .expand-collapse li {
  background: -webkit-linear-gradient(#19191a, #1a1b1c);
  box-shadow:
    inset -1px -1px 0 rgba(255, 255, 255, 0.1),
    inset 1px 1px rgba(0, 0, 0, 0.1);
}

.command-panel .expand-collapse li:hover {
  color: #fff;
}

.command-panel .preview-list .path.selected .path-details,
.command-panel .preview-list li.operation.selected {
  background-color: rgba(255, 255, 255, 0.05);
}

.command-panel .preview-list:focus .path.selected .path-details,
.command-panel .preview-list:focus li.operation.selected {
  background-color: rgba(255, 255, 255, 0.05);
}

.command-panel .preview-list .path {
  color: #bbb;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.command-panel .preview-list .path:hover .path-name {
  color: #fff;
}

.command-panel .preview-list .path:before {
  color: #555;
}

.command-panel .preview-list .path:hover:before {
  color: #fff;
}

.command-panel .preview-list .path:first-child {
  border-top: none;
}

.command-panel .preview-list .line-number {
  color: rgba(255, 255, 255, 0.3);
  font-family: monospace;
}

.command-panel .preview-list .path-match-number {
  color: rgba(255, 255, 255, 0.3);
}

.command-panel .preview-list .preview {
  word-break: break-all;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255, 255, 255, 0.1);
  color: #cca300;
}

.command-panel .preview-list li.operation {
  color: #777;
}

.command-panel .preview-list li.operation:hover,
.command-panel li.operation.selected .preview {
  color: #fff;
}
