.codeBreakpointMargin {
  background: var(--color-breakpoint-code);
  clip-path: circle(20%);
  cursor: pointer;
}

.binaryBreakpointMargin {
  background: var(--color-breakpoint-binary);
  clip-path: circle(20%);
  cursor: pointer;
}

.mixedBreakpointMargin {
  background: var(--color-breakpoint-mixed);
  clip-path: circle(20%);
  cursor: pointer;
}

.disabledBreakpointMargin {
  background: var(--color-breakpoint-disabled);
  clip-path: circle(20%);
  cursor: pointer;
}

.hoverBreakpointMargin {
  background: var(--color-breakpoint-code);
  clip-path: circle(30%);
  cursor: pointer;
}

.disabledHoverBreakpointMargin {
  background: var(--color-breakpoint-disabled);
  clip-path: circle(30%);
  cursor: pointer;
}

.activeBreakpointMargin {
  cursor: pointer;

  /* Use the provided SVG as a background image */
  background-image: var(--image-breakpoint-current);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.activeBreakpointOnExistingMargin {
  cursor: pointer;
  background-image: var(--image-breakpoint-current-existing);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.activeBinBreakpointOnExistingMargin {
  cursor: pointer;
  background-image: var(--image-breakpoint-current-existing-bin);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.activeBreakpointLine {
  background: var(--bgcolor-debug-active-bp);
  border: 1px solid var(--bgcolor-debug-active-bp);
}

.activeMacroInvocationLine {
  background: var(--bgcolor-debug-macro-bp);
  border: 1px solid var(--bgcolor-debug-macro-bp);
}

.activeMacroBreakpointMargin {
  cursor: pointer;

  /* Use the provided SVG as a background image */
  background-image: var(--image-breakpoint-macro);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.activeMacroBreakpointOnExistingMargin {
  cursor: pointer;
  background-image: var(--image-breakpoint-macro-existing);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.activeMacroBinBreakpointOnExistingMargin {
  cursor: pointer;
  background-image: var(--image-breakpoint-macro-existing-bin);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  background-color: transparent;
}

.unreachableBreakpointMargin {
  background: var(--color-debug-unreachable-bp);
  clip-path: circle(20%);
  cursor: pointer;
}

.errorDecoration {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' enable-background='new 0 0 9 6' height='6' width='9'%3E%3Cg fill='%23ff0000'%3E%3Cpath d='M0,2 C1.5,0 3,0 4.5,2 S7.5,4 9,2' stroke='%23ff0000' stroke-width='0.75' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 9px 6px;
  padding-bottom: 4px;
  border-bottom: none !important;
  text-decoration: none !important;
}

.errorIcon, .warningIcon {
  background-color: var(--console-ansi-red) !important;
  color: var(--console-ansi-bright-white) !important;
  font-family: var(--shell-font-family) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  margin-left: 0.75rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  border-top-left-radius: 100px !important;
  border-bottom-left-radius: 100px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1000ch;
  vertical-align: middle;
  display: inline-block;
  text-align: right;
}

.warningIcon {
  background-color: orangered !important;
}

.warningDecoration {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' enable-background='new 0 0 9 6' height='6' width='9'%3E%3Cg fill='%23ff9900'%3E%3Cpath d='M0,2 C1.5,0 3,0 4.5,2 S7.5,4 9,2' stroke='%23ff9900' stroke-width='0.75' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 9px 6px;
  padding-bottom: 4px;
  border-bottom: none !important;
  text-decoration: none !important;
}

.warningIcon {
  color: orange;
}
