label {
  caret-color: currentColor;

  &.separator {
    @extend .dimmed;
  }

  &:disabled {
    filter: Opacity(var(--disabled-opacity));
  }
}

.dimmed {
  opacity: var(--dim-opacity);
}

.accent {
  color: var(--accent-color);
}

@each $e_type in error, warning, success {
  .#{$e_type} {
    color: var(--accent-color);

    --accent-bg-color: var(--#{$e_type}-bg-color);
    --accent-fg-color: var(--#{$e_type}-fg-color);
    --accent-color: var(--#{$e_type}-color);
  }
}

/**********************
 * General Typography *
 **********************/

.title-1 {
  font-weight: 800;
  font-size: 181%;
}

.title-2 {
  font-weight: 800;
  font-size: 136%;
}

.title-3 {
  font-weight: 700;
  font-size: 136%;
}

.title-4 {
  font-weight: 700;
  font-size: 118%;
}

.heading {
  font-weight: 700;
}

.body {
  font-weight: 400;
  line-height: 140%;
}

.caption-heading {
  font-weight: 700;
  font-size: 82%;
}

.caption {
  font-weight: 400;
  font-size: 82%;
  line-height: 140%;
}

.document {
  font-family: var(--document-font-family);
  font-size: var(--document-font-size);
  line-height: 140%;
}

.monospace {
  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size);
}

.numeric {
  font-variant-numeric: tabular-nums;
}

/*******************
 * Editable Labels *
 *******************/

editablelabel > stack > text {
  color: var(--view-fg-color);
  background-color: var(--view-bg-color);
}
