/**
 * Boon theme for reveal.js.
 *
 * Copyright (c) 2015, Sungsit Sawaiwan (https://sungsit.com | gibbozer [at] gmail [dot] com).
 *
 */

// Default mixins and settings -----------------
@import "../libraries/reveal.js/css/theme/template/mixins";
@import "../libraries/reveal.js/css/theme/template/settings";
// ---------------------------------------------

// Theme-specific fonts
// weight helper
@function weight($key) {
  @if map-has-key($weights, $key) {
    @return map-get($weights, $key);
  }
  @warn "Unknown `#{$key}` in $weights.";
  @return null;
}

// @font-face mixin
@mixin font-include($font-family, $name, $weight, $style: normal) {
  font-family: #{$font-family};
  src: url(../fonts/woff2-otf/#{$name}.woff2) format('woff2'),
       url(../fonts/woff-otf/#{$name}.woff) format('woff'),
       url(../fonts/otf/#{$name}.otf) format('truetype');
  font-weight: $weight;
  font-style: $style;
}

// font classes & styles
@mixin font-class($font-family, $class-name, $weight, $style: normal, $name: null) {
  .#{$class-name}-#{$weight}#{$name} {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;
  }
}

// vars
$font-family: Boon;
$class-name: boon;
$styles: normal italic;
$weights: (Light: 300, Regular: 400, Medium: 500, SemiBold: 600, Bold: 700);

// sass magic!
@each $name, $value in $weights {
  @each $style in $styles {
    @if $style == normal {
      @font-face {
        @include font-include($font-family, #{$font-family}-#{$name}, $value);
      }
      @include font-class($font-family, $class-name, $value);
    }
    @if $style == italic {
      @font-face {
        @if $value == 400 { @include font-include($font-family, #{$font-family}-Italic, $value, $style); }
        @else { @include font-include($font-family, #{$font-family}-#{$name}Italic, $value, $style); }
      }
      @include font-class($font-family, $class-name, $value, $style, i);
    }
  } 
}


// monospaced font
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);

@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin ot-feature($argument) {
  @include vendor-prefix(font-feature-settings, #{$argument})
}

// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fcfcfc;

$mainColor: #222;
$headingColor: #222;

$mainFontSize: 54px;
$mainLineHeight: 1.5;
$mainFont: $font-family;
$headingFont: $font-family;
$headingLineHeight: 1.25;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: capitalize;
$headingFontWeight: 400;
$linkColor: #2ad;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );

$heading1Size: 36px;
$heading2Size: 30px;
$heading3Size: 24px;
$heading4Size: 20px;

section.has-dark-background {
  &, h1, h2, h3, h4, h5, h6 {
    color: #fff;
  }
}

// Theme template ------------------------------
@import "../libraries/reveal.js/css/theme/template/theme";
// ---------------------------------------------

// Boon customizations
body .reveal {

  font-family: $font-family;

  @include ot-feature('"locl"');
  @include vendor-prefix(font-kerning, normal);
  @include vendor-prefix(font-variant, common-ligatures);

  .ss01,
  [lang|="pi"],
  [lang|="sa"],
  [lang|="ro"],
  [lang|="mo"] {
    @include ot-feature('"ss01"');
  }
  
  .tnum {
    @include ot-feature('"tnum"');
  }
  
  .pnum {
    @include ot-feature('"pnum"');
  }
  
  sup, .sups {
    @include ot-feature('"sups"');
    vertical-align: unset;
  }
  
  sub, .subs {
    @include ot-feature('"subs"');
    vertical-align: unset;
  }
  
  .numr {
    @include ot-feature('"numr"');
    vertical-align: unset;
  }
  
  .dnom {
    @include ot-feature('"dnom"');
    vertical-align: unset;
  }
  
  .frac {
    @include ot-feature('"frac"');
  }

  .ss02 {
    @include ot-feature('"ss02"');
  }

  .ss18 {
    @include ot-feature('"ss18"');
  }

  .ss19 {
    @include ot-feature('"ss19"');
  }

  .ss20 {
    @include ot-feature('"ss20"');
  }

  p {
    line-height: 1.5;
  }

  h1,h2,h3,h4,h5,h6 { text-shadow: 0 0 0 transparent !important; }

  pre {
    @import "tomorrow";

    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    font-size: 24px;
    margin: 0;
    width: 100%;
    border: 1px solid darken( $backgroundColor, 10% );
    box-shadow: 0 0 0 transparent;
  }

  pre + pre { margin-top: -1px; }

  small {
    font-size: 24px;
    line-height: 1.5em;
  }

  .slides {
    text-align: left;
    .slide h1:first-child {
      background: #fff;
      //color: $backgroundColor;
      padding: 0.12em 0.35em;
      margin-bottom: 30px;
      border: 1px solid darken( $backgroundColor, 5% );
      //box-shadow: 0 0 0.1em darken( $backgroundColor, 5% );
      //border-radius: 4px;
      &:before {
        content: "\0E4F\00A0";
      }
      font-weight: 700;
    }
  }
  
  header {
    .title {
      font-size: 157px;
      line-height: 1em;
      margin-bottom: 0px;
    }
    .subtitle {
      font-size: 200px;
      line-height: 1em;
      margin: 0px;
      color: $linkColor;
    }
    .date {
      font-size: 136px;
      line-height: 1.5em;
      margin: 0px;
      color: lighten( $mainColor, 75% );
    }
  }

  .poem {
    font-size: 0.58em;
    margin-bottom: 0.4em;

    table {
      margin: 0;
      padding: 0;
      
      th,td {
        border: 0 none;
        margin: 0;
        padding: 0.2em 1.5em 0.2em 0;
      }
      th { padding-bottom: 0.5em; }
    }
  }

  #style-sets {
    span {
      color: $linkColor;
    }
  }

  .controls div.enabled { opacity: 1; }

} // end .reveal

@media print {
  .print-hide,
  body .reveal .print-hide { display: none; }

  body .reveal  * { box-shadow: 0 0 0 transparent; }

  body .reveal  #cover {
    text-align: center;
    .title {
      margin-top: 30px;
    }
    .date {
      font-size: 60px;
      margin-top: 30px;
    }
  }
}

// Font options
body {
  &.boon-300 .reveal {
    font-weight: 300 !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 300 !important;
    }
  }
  &.boon-300i .reveal {
    font-weight: 300 !important;
    font-style: oblique !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 300 !important;
      font-style: oblique !important;
    }
  }
  &.boon-400 .reveal {
    font-weight: 400 !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 400 !important;
    }
  }
  &.boon-400i .reveal {
    font-weight: 400 !important;
    font-style: oblique !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 400 !important;
      font-style: oblique !important;
    }
  }
  &.boon-500 .reveal {
    font-weight: 500 !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 500 !important;
    }
  }
  &.boon-500i .reveal {
    font-weight: 500 !important;
    font-style: oblique !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 500 !important;
      font-style: oblique !important;
    }
  }
  &.boon-600 .reveal {
    font-weight: 600 !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600 !important;
    }
  }
  &.boon-600i .reveal {
    font-weight: 600 !important;
    font-style: oblique !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600 !important;
      font-style: oblique !important;
    }
  }
  &.boon-700 .reveal {
    font-weight: 700 !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700 !important;
    }
  }
  &.boon-700i .reveal {
    font-weight: 700 !important;
    font-style: oblique !important;
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700 !important;
      font-style: oblique !important;
    }
  }
}

.select-form {
  position: absolute;
  z-index: 1000;
  top: 0;
  right: 0;
  #font-selector {
    padding: 02px 5px;
    border: 1px solid darken( $backgroundColor, 5% );;
    border-radius: 0;
    overflow: hidden;
    background-color: #fff;
    &:focus{ outline: none; }
}
}

