@import "./variables";
@import "./mixins";

// --------------------------------------------------
// Base styles for HTML elements
// --------------------------------------------------

html {
  color: $primary;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: $line-height-large;
  background-color: $secondary;
  overflow-y: scroll;
  direction: ltr;
}

// Links
// --------------------------------------------------

a {
  color: $tertiary;
  text-decoration: none;
  cursor: pointer;
  &:visited {
    color: $tertiary;
  }
  &:hover {
    color: $tertiary;
  }
  &:active {
    color: $tertiary;
  }
}

// Typography
// --------------------------------------------------

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid $primary-low;
  padding: 0;
}

// Lists
// --------------------------------------------------

ul,
dd {
  margin: 0 0 9px 25px;
  padding: 0;
}


.cooked ul, .cooked ol, .cooked dd {
  clear: both;
}

.cooked ul, .d-editor-preview ul {
  margin: 0;
  padding-left: 40px;
}

li {
  > ul,
  > ol {
    margin-bottom: 0;
  }
}

// Embedded content
// --------------------------------------------------

img {
  vertical-align: middle;
}

// Forms
// --------------------------------------------------

fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}

pre code {
  overflow: auto;
  tab-size: 4;
}

// TODO figure out a clean place to put stuff like this
.row:before, .row:after {
  display: table;
  content: "";
}
.row:after {clear: both;}


#offscreen-content {
  display: none;
}

// Tables
// --------------------------------------------------

tbody {
  border-top: 3px solid $primary-low;
}

tr {
  border-bottom: 1px solid $primary-low;
  &.highlighted {
    animation: background-fade-highlight 2.5s ease-out;
  }  
}