@import "../styles/var.less";

.vc-log-row {
  margin: 0;
  padding: (6em / @font) (8em / @font);
  overflow: hidden;
  line-height: 1.3;
  border-bottom: 1px solid var(--VC-FG-3);
  word-break: break-word;
  position: relative;
  display: flex;
}

// log type
.vc-log-info {
  color: var(--VC-PURPLE);
}
.vc-log-debug {
  color: var(--VC-YELLOW);
}
.vc-log-warn {
  color: var(--VC-ORANGE);
  border-color: var(--VC-WARN-BORDER);
  background-color: var(--VC-WARN-BG);
}
.vc-log-error {
  color: var(--VC-RED);
  border-color: var(--VC-ERROR-BORDER);
  background-color: var(--VC-ERROR-BG);
}

// copy icon
.vc-logrow-icon {
  // float: right;
  margin-left: auto;
}

// group
.vc-log-padding {
  width: (20em / @font);
  border-left: 1px solid var(--VC-FG-3);
}
.vc-log-group .vc-log-content {
  font-weight: bold;
}
.vc-log-group-toggle {
  padding-left: (10em / @font);
}
.vc-log-group-toggle {
  display: block;
  font-style: italic;
  padding-left: (10em / @font);
  position: relative;
}
.vc-log-group-toggle:active {
  background-color: var(--VC-BG-COLOR-ACTIVE);
}
.vc-log-group > .vc-log-group-toggle::before {
  content: "";
  position: absolute;
  top: (4em / @font);
  left: (2em / @font);
  width: 0;
  height: 0;
  border: transparent solid (4em / @font);
  border-left-color: var(--VC-FG-1);
}
.vc-log-group.vc-toggle > .vc-log-group-toggle::before {
  top: (6em / @font);
  left: 0;
  border-top-color: var(--VC-FG-1);
  border-left-color: transparent;
}

// time
.vc-log-time {
  width: (80em / @font);
  color: #777;
}

// repeat
.vc-log-repeat i {
  margin-right: (4em / @font);
  padding: 0 (@fontSize / 2);
  color: #D7E0EF;
  background-color: #42597F;
  border-radius: (@fontSize / 1.5);
}
.vc-log-error .vc-log-repeat i {
  color: #901818;
  background-color: var(--VC-RED);
}
.vc-log-warn .vc-log-repeat i {
  color: #987D20;
  background-color: #F4BD02;
}

// content
.vc-log-content {
  flex: 1;
}

// command input & output
.vc-log-input,
.vc-log-output {
  padding-left: (12em / @font);
}
.vc-log-input:before,
.vc-log-output:before {
  content: "›";
  position: absolute;
  top: (2em / @font);
  left: 0;
  font-size: (16em / @font);
  color: #6A5ACD;
}
.vc-log-output:before {
  content: "‹";
}