@use "Colors";

strong,
.cm-bold-marker,
.cm-bold-text {
  font-weight: 300 !important;
  color: Colors.$significant-color-third;
}

.cm-formatting-bold-text {
  font-weight: 300 !important;
  color: Colors.$significant-color-third;
}

em,
.cm-italic-marker,
.cm-italic-text {
  font-style: italic;
  color: Colors.$significant-color-second;
}

.cm-formatting-italic-text {
  font-style: italic;
  color: Colors.$significant-color-second;
}

.cm-inline-code-text {
  // background-color: $background-color-secondary;
  @apply bg-gray-200! text-xs!;
  padding: 0.1em 0.25em;
  border-radius: 4px;
}

.cm-formatting-inline-code-text {
  // background-color: $background-color-secondary;
  @apply bg-gray-200! text-xs!;
  padding: 0.1em 0.25em;
  border-radius: 4px;
}

.cm-line:has(.cm-formatting-codeblock) {
  // background-color: $background-color-secondary;
}

.cm-formatting-codeblock-line {
  // background-color: $background-color-secondary;
  display: block;
}
.cm-formatting-codeblock-line-begin {
  // background-color: $background-color-secondary;
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.cm-formatting-codeblock-line-end {
  // background-color: $background-color-secondary;
  display: block;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cm-formatting-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid Colors.$foreground-color;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 5px;

  &:checked {
    background-color: Colors.$significant-color-second;
    border-color: Colors.$significant-color-second;
  }

  &:checked::after {
    content: "\2714";
    display: block;
    color: white;
    font-size: 15px;
    text-align: center;
    line-height: 12px;
  }

  &:hover {
    border-color: Colors.$significant-color-second;
  }
}

.cm-line:has(.cm-formatting-input:checked):has(.list-item-content-unordered) {
  .list-item-content-unordered {
    // text-decoration: line-through;
    color: Colors.$foreground-color-light;
  }
}

.cm-mark-hidden {
  display: none;
}
