@use 'quill-theme' as quill;

@include quill.quill-white-theme;

// You must add this on a component based drawer
:host {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-quote {
  color: var(--drawer-text-color);
  white-space: pre-wrap;
  word-wrap: break-word;

  &.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.quote-toggle {
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--primary-color);

  &:hover {
    text-decoration: underline;
  }
}

.annotation-meta {
  color: var(--drawer-text-color);
}

.setting-section-break {
  margin: 0.625rem 0 !important;
}

.offcanvas-title-right {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
}

// Highlight stuff (needs to be moved to annotation service)

$blue-color: rgba(59, 130, 246);
$green-color: rgba(34, 197, 94);

.blue-title {
  background-color: $blue-color;
}

.green-title {
  background-color: $green-color;
}


