/* Custom tippy.js tooltip template */
.tippy-tooltip.span-tooltip-theme {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}
.tippy-tooltip.span-tooltip-theme > .tippy-content {
  padding: 0;
  font-size: 0.815em;
}

.span-tooltip-border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.span-service-name-container {
  padding: 0.2em 0.5em;
}

.span-tooltip-header {
  display: flex;
  padding: 0.2em 0.5em;
  word-break: break-all;
}

.span-tooltip-header .left {
  flex-grow: 1;
}

.span-tooltip-header .right {
  white-space: nowrap;
  margin-left: 2em;
}

.span-tooltip-time {
  color: #55d239;
}

.span-tooltip-operation-name {
  margin-left: 1em;
  font-weight: 600;
}

.span-tooltip-tag-icon svg,
.span-tooltip-log-icon svg,
.span-tooltip-error-icon svg {
  position: relative;
  height: 1em;
  width: 1em;
  fill: #fff;
  top: 2px;
}

.span-tooltip-error-icon svg {
  margin-right: 0.25em;
  transform: scale(1.1);
  fill: rgba(255, 26, 26, 0.85);
}

.span-tooltip-tag-count,
.span-tooltip-log-count {
  margin-right: 0.25em;
}

.span-tooltip-log-count {
  margin-left: 0.6em;
}

.span-tooltip-tags .section-header,
.span-tooltip-process-tags .section-header,
.span-tooltip-log .section-header {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9em;
  font-weight: 800;
  margin-bottom: 0.25em;
}

.span-tooltip-tags,
.span-tooltip-process-tags,
.span-tooltip-log {
  padding: 0.2em 0.5em;
  word-break: break-all;
}

.span-tooltip-tag {
  display: flex;
}
.span-tooltip-tag.margin-left {
  margin-left: 1em;
}

.span-tooltip-tag .tag-path {
  flex-grow: 1;
}

.span-tooltip-tag .tag-value {
  margin-left: 1em;
}

.span-tooltip-log {
  max-height: 5em;
  padding-bottom: 0.5em;
  overflow: hidden;
}

.span-tooltip-log .log-field-key {
  background: rgba(255, 255, 255, 0.25);
  padding: 0.15em 0.3em;
  border-radius: 3px;
  font-weight: 500;
}

.span-tooltip-log .log-field-value {
  margin: 0 0.4em 0 0.2em;
}

.span-tooltip-log .log-field-key.error {
  background: rgba(255, 26, 26, 0.35);
  font-weight: 600;
}
