@use '../../../styles/_globals.scss' as *;

:host {
  display: block;
  position: relative;

  [hidden] {
    display: none !important;
  }
}

.markdown-wrapper {
  display: block;
  box-sizing: border-box;
  border: none;
  overflow: auto;
  position: relative;
  transition: height var(--transition-fast);
  transform-origin: top;
  @include scrollY;

  .resize-to-fit {
    position: absolute;
    right: var(--s2);
    top: 0;
    cursor: pointer;
  }

  &.isHideOverflow {
    overflow: hidden;
  }
}

.markdown-unparsed,
.markdown-parsed {
  //transition: height 1.3s;
  border: 0;
  padding: var(--s) var(--s2);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  display: block;
  resize: none;
  min-height: inherit;
  overflow: hidden;
  cursor: text;
}

:host ::ng-deep .markdown-parsed,
:host ::ng-deep .markdown-parsed * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-touch-callout: default !important;
}

// The checkbox is a Material Icons ligature, so its textContent is the literal
// glyph name (e.g. `check_box_outline_blank`). With selection enabled above, a
// drag across a checklist would otherwise drop that name into the clipboard, so
// keep the glyph itself unselectable while its label stays copyable.
:host ::ng-deep .markdown-parsed .checkbox {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.markdown-unparsed {
  white-space: pre-wrap;
}

:host:has(.controls) {
  .markdown-unparsed,
  .markdown-parsed {
    padding-bottom: var(--s5);
  }
}

.markdown-parsed.preview-while-editing {
  position: relative;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--color-border);
  opacity: 0.8;
  pointer-events: none;
}

// NOTE:
// see global marked.scss for more styles

textarea {
  outline: none;
}

.controls {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: var(--transition-standard);

  :host:hover & {
    opacity: 1;
  }
  @include touchPrimaryDevice {
    opacity: 0.5;
  }
}
