@import '../../view/ui/common-variables';

* {
  box-sizing: border-box;
}


body {
  font-family: 'Georgia', 'Times New Roman', 'Cambria', serif;
  font-weight: 300;
  font-size: 14px;
  margin: 0 auto;
  padding: 10px 0;
  width: 7.8in;
  background: none;
  line-height: 1.3;
}

h1,
h2,
figcaption,
.title-section,
.title-immersive,
.cover-text,
.print-settings,
.section-number,
.app-tagline {
  font-family: 'open_sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: inherit;
  line-height: 1.3;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

blockquote,
figcaption {
  color: #666;
}

blockquote {
  text-align: left;
  border-left: none;
}

figcaption {
  text-align: center;
  font-size: 12px;
}

// --- LINKS --- //

a {
  color: @link-color;
  text-decoration: none;
  border-bottom: 1px dotted gray;
}
a:hover, a:active {
  color: @link-hover-color;
  text-decoration: none;
  border-bottom-style: solid;
}
a:visited {
  color: darken(@link-hover-color, 5%);
}
// don't mess with links that are in color-formatted spans
span[style] > a {
  color: inherit;
}

// see print settings for inline links

// hide the normal app header
.embed-wrapper {
  .story-header {
    display: none;
  }
}

// --- VERTICAL SPACING --- //

.sequence,
.title-section,
.immersive,
.credits {
  margin-top: 20px;
}

.block {
  margin: 10px 0;
}

// --- COLOR CLASSES (panels, dark theme, etc) --- //

.bg-dark {
  background: rgba(0, 0, 0, 0.75);
  figure& {
    background: none;
    img {
      background: #111;
    }
  }
}

.bg-light {
  background: rgba(255, 255, 255, 0.75);
}

.text-dark {
  color: #4c4c4c;
  &.text-shadow {
    text-shadow: 0 0 8px rgba(255,255,255,0.95);
  }
}

.text-light {
  color: white;
  &.text-shadow {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.95);
  }
}

.missing-type-error {
  background: fuchsia;
}

.app-tagline {
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 2em;
  line-height: 1.5em;
  a:after {
    content: '' !important;
  }
}

// --- styles for print settings -- //

.links-inline {
  a:after {
    content: ' (link: ' attr(href) ') ';
    font-size:0.8em;
    word-break: break-all;
  }
}

.page-breaks {
  .cover,
  .sequence,
  .immersive {
    page-break-after: always;
  }
}

.black-text {
  .text-block,
  .title-immersive,
  figcaption,
  blockquote,
  .credits {
    &, span, a, b {
      color: black !important;
      text-shadow: none !important;
    }
  }
}

// --- BUTTONS --- //

// had to get rid of calcite-bootstrap because it
// hijacked text colors and backgrounds. add back
// button styling here.
.btn {
  transition: all 0.25s ease;
  border-radius: 0;
  padding: 5px 10px;
  line-height: 1.5;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  background-image: none;

  &:active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }
}

.btn-primary {
  color: @btn-primary-color;
  background-color: @btn-primary-bg;
  border-color: @btn-primary-border;

  &:hover, &:focus {
    background-color: @link-hover-color;
    border-color: @link-hover-color;
  }

  &:active {
    background-color: darken(@btn-primary-bg, 10%);
    border-color: darken(@btn-primary-border, 10%);
  }
}

.btn-default {
  color: @btn-default-color;
  background-color: @btn-default-bg;
  border-color: @btn-default-border;

  &:hover, &:focus {
    color: darken(@btn-default-color, 5%);
    background-color: #e9e9e9;
    border-color: darken(@btn-default-border, 5%);
  }
  &:active {
    color: darken(@btn-default-color, 10%);
    background-color: #e0e0e0;
    border-color: darken(@btn-default-border, 10%);
  }
}

.btn-link {
  padding: 5px 0;
  border: none;
  background: none;

  color: @btn-default-color;

  &:hover, &:focus {
    color: darken(@btn-default-color, 5%);
    background: none;
  }
  &:active {
    color: darken(@btn-default-color, 10%);
    background: none;
    box-shadow: none;
  }

}

