@import "~bulma";

html {
  font-family: 'Inter', sans-serif;
}

body {
  font-family: 'Inter', sans-serif;
}

.input-line {
  font-family: 'Inter', sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', sans-serif;
  }
  body {
    font-family: 'Inter var', sans-serif;
  }
  .input-line {
    font-family: 'Inter var', sans-serif;
  }
}

#editor {
}

#save-indicator {
  position: fixed;
  top: 0;
  left: 0;
  background: lightskyblue;
  font-weight: bold;
  color: white;
  padding: 3px;
  z-index: 50;
}

.hidden {
  display: none;
}

.marker {
  display: inline-block;

  width: 16px;
  height: 16px;

  align-self: first baseline;
  flex-shrink: 0;

  margin-right: 4px;
  margin-top: 4px;

  border-radius: 50%;
  border: 4px solid white;

  background: black;
}

textarea {
  box-sizing: border-box;
  min-height: 19px;
  overflow-x: hidden;
  border: none;
  resize: none;
  line-height: 24px;
}

.marker:hover {
  border-color: #ccc;
}

.list-item {
  border: none;
  padding: 2px 0px;
}

.input-line,
.input-line:active,
.input-line:focus {
  width: 100%;
  box-shadow: none;
  border: none;
  min-height: 19px;
  word-break: break-word;
}

.codex-editor .icon {
  align-items: initial;
  display: initial;
  justify-content: initial;
  height: initial;
  width: initial;
}

.codex-editor h1.ce-header {
  @extend .title;
  @extend .title.is-1;
}

.codex-editor h2.ce-header {
  @extend .title;
  @extend .is-2;
}

.codex-editor h3.ce-header {
  @extend .title;
  @extend .is-3;
}

.codex-editor h4.ce-header {
  @extend .title;
  @extend .is-4;
}

.codex-editor h5.ce-header {
  @extend .title;
  @extend .is-5;
}

.codex-editor h6.ce-header {
  @extend .title;
  @extend .is-6;
}