/* You may change these however you want, but if you decide to delete any rules
 * some built-in components may stop working, and if you delete the file, the
 * build will very likely break. */

@background-color: #fafafa;

@space-sm: 0.3rem;
@space-med: 1rem;
@space-lg: @space-med * 3;
@space-xl: @space-lg * 3;

.header {
  position: relative;
  width: 100%;
}

@hover-bezier: cubic-bezier(0.4, 0, 0.2, 1);
@hover-color: rgb(255, 50, 50);
@hover-duration: 0.3s;

.link {
  background: none;
  text-decoration: none;
  transition:
    color @hover-duration @hover-bezier 0ms,
    background-color @hover-duration @hover-bezier 0ms,
    box-shadow @hover-duration @hover-bezier 0ms,
    border @hover-duration @hover-bezier 0ms;

  &:not(:disabled) {
    cursor: pointer;

    &:hover {
      color: @hover-color;
    }
  }
}

.loadingScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: @background-color;
}

.passage {
  position: relative;
  width: 100%;
  height: 100%;
}

.passageRendererWrapper {
  padding-top: 1.5rem;
}

.pastScrollPassage {
  opacity: 0.5;
  cursor: pointer;

  * {
    pointer-events: none;
  }
}

.section {
  margin-bottom: @space-med + @space-sm;
}