.Grid {
  display: flex;
  /* full-height */
  align-items: stretch;
  height: 100vh;
}
.Grid-cell {
  flex: 1;
  padding: 8px;
}
.Grid-cell-2 {
  flex: 2;
  padding: 8px;
}

.Column {
  display: flex;
  flex-direction: column;
}
.Column-cell {
  flex: 0 0 auto;
}
.Column-cell-fill {
  flex: 1;
}

body {
  font-family: sans-serif;
  margin: 0;
}

.content-input {
  width: 90%;
  height: 5em;
}
.content-interactive {
  overflow: scroll;
  color: #636363; /* gray */
  text-indent: 1ex;
  user-select: none;
}

/*
 * We're not going full BEM with these since they can be so numerous.
 * Having shorter class names should reduce memory and improve speed
 */
.word {
  cursor: pointer;
}
.new-word {
  background: #d7e8ff;
}
.known-word-0 {
  background: yellow;
}
.known-word-1 {
  background: #ffff3f;
}
.known-word-2 {
  background: #ffff7f;
}
.known-word-3 {
  background: #ffffaf;
}
.known-word-4 {
  background: #ffffff;
}
.selected-word {
  color: black;
}
.selected-phrase {
  text-decoration: underline;
}
.phrase-start {
  border-bottom: red dashed 1px;
  border-left: red dashed 1px;
}
.phrase-start-2 {
  border-bottom: red dashed 2px;
  border-left: red dashed 2px;
}
.phrase-end {
  border-top: red dashed 1px;
  border-right: red dashed 1px;
}
.phrase-end-2 {
  border-top: red dashed 2px;
  border-right: red dashed 2px;
}

.top-right-row {
  display: flex;
  justify-content: space-between;
}

button.lang {
  cursor: pointer;
  background: grey;
}
button.lang--selected {
  background: white;
}

/* entry-editor */
.entry-editor__hint {
  width: calc(100% - 1em);
}
.entry-editor__familiarity {
  cursor: pointer;
  background: #ffffaf;
  border: 1px solid silver;
}
.entry-editor__familiarity--selected {
  background: yellow;
  border: 1px solid black;
}
.entry-editor__new-tag-container {
  display: flex;
  flex-wrap: wrap;
}
.entry-editor__new-tag-input {
  width: 10em;
  flex: 1 1;
}
.entry-editor__fav {
  font-size: 60%;
  cursor: pointer;
}

/* sound-preview */
.sound-preview {
  cursor: pointer;
}

/* help-view */
.help-view {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.help-view__container {
  /* would be good to know how to do this in relation to  */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 1em;
  height: calc(100vh - 2em);
  background: white;
  box-shadow: 0 0 0.5em black;
  overflow: scroll;
}
.help-view__close {
  position: absolute;
  top: 1em;
  right: 1em;
}

/* transitions */
.slide-down-enter-active {
  transition: all 0.3s ease;
}
.slide-down-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-down-enter,
.slide-down-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}