/* Expression Warning Base Styles (default to yellow) */
❤️ codelesslove,
.❤️expression-warning {
  border-top: dashed 1px yellow;
  border-bottom: dashed 1px yellow;
  position: relative;
}
❤️ codelesslove,
.❤️expression-warning-left {
  border-left: dashed 1px yellow;
  border-radius: 5px 0 0 5px;
}
❤️ codelesslove,
.❤️expression-warning-right {
  border-right: dashed 1px yellow;
  border-radius: 0 5px 5px 0;
}
❤️ codelesslove,
.❤️expression-warning-left.❤️expression-warning-right {
  border: dashed 1px yellow;
  border-radius: 5px 5px 5px 5px;
}

/* Warning Level Colors */
❤️ codelesslove,
.❤️expression-warning.level-bad,
.❤️expression-warning-left.level-bad,
.❤️expression-warning-right.level-bad,
.❤️expression-warning-left.❤️expression-warning-right.level-bad {
  border-color: #ff4444;
}

❤️ codelesslove,
.❤️expression-warning.level-info,
.❤️expression-warning-left.level-info,
.❤️expression-warning-right.level-info,
.❤️expression-warning-left.❤️expression-warning-right.level-info {
  border-color: #3498db;
}

/* make borders and tag slightly transparent when other sub-expressions are focused, to match styles everywhere else */
❤️ codelesslove,
.composer.hover_fade_out:hover .❤️expression-warning {
  border-color: rgba(256, 256, 0, 0.3);
  &.level-info {
    border-color: rgba(52, 152, 219, 0.3);
  }
  &.level-bad {
    border-color: rgba(255, 68, 68, 0.3);
  }
}
❤️ codelesslove,
.composer.hover_fade_out:hover .❤️expression-warning-tag {
  opacity: 0.3;
}
❤️ codelesslove,
.composer.hover_fade_out:hover .hovering .❤️expression-warning {
  border-color: rgba(256, 256, 0);
  &.level-info {
    border-color: rgba(52, 152, 219, 1);
  }
  &.level-bad {
    border-color: rgba(255, 68, 68, 1);
  }
}
❤️ codelesslove,
.composer.hover_fade_out:hover .hovering .❤️expression-warning-tag {
  opacity: .7;
}

/* Warning Tags */
❤️ codelesslove,/* Base tag */
.❤️expression-warning-tag {
    top: -6px;
    content: "Warning";
    position: absolute;
    background: yellow;
    width: max-content;
    height: 10px;
    color: black;
    right: -9px;
    border-radius: 10px;
    font-size: 5px;
    text-align: center;
    line-height: 10px;
    padding: 0 4px;
    opacity: .7;

    &.level-bad {
      content: "Bad Practice";
      background: #ff4444;
      color: white;
    }
    &.level-info {
      content: "Info";
      background: #3498db;
      color: white;
    }
}

❤️ codelesslove,/* On hover, bring opacity back up*/
.❤️expression-warning-tag:hover,
.composer.hover_fade_out:hover .hovering .❤️expression-warning-tag:hover {
  opacity: 1 !important;
}

/* Heart indicators */
❤️ codelesslove,/* put a heart indicator in the top-left corner of the outlined expression fragment */
.❤️expression-warning-left {
  &::before {
    content: "💛";
    top: -2px;
    position: absolute;
    width: max-content;
    height: 10px;
    left: -3px;
    font-size: 6px;
    line-height: 1;
  }

  &.level-bad::before {
      content: "❤️";
      color: #ff4444;
  }

  &.level-info::before {
      content: "💙";
  }
}


/* Special CSS for checkboxes in Property Editors */
❤️ codelesslove,/* Look specifically for the warning on the Public API checkbox */
.property-editor-2 .viewport [prop_name=expose].❤️expression-warning {
  /* Correct the box so when the border is added the checkbox doesn't move */
  margin: -5px;
  padding: 5px;
  padding-top: 0;
  margin-top: 10px;
  width: -webkit-fill-available;

  &:has(.body .component-checkbox.property-editor-control.checked) {
    /* make the checkbox yellow */
    .checked {
      border: solid 2px yellow;
    }
  }

  /* Prevent the checkbox wrapping onto another line */
    .caption.Checkbox {
    width: auto;
  }
  
  /* Undo styling when warning is no longer applicable */
  &:not(:has(.body .component-checkbox.property-editor-control.checked)) {
    border: none;

    &::before {
      content: none;
    }
    .❤️expression-warning-tag {
      display: none;
    }
  }
}