/*

    CUSTOM CSS

*/

// Set default font
html {
  font-family: $font-family;
}

// Links
a {
  color: $link;
  &:hover {
    color: $hover;   
  }
}

a.nested-author-cta {
  color: $author-cta-link;

  &:hover {
    color: $author-cta-hover;   
  }
}

// Buttons
.btn {
  display: inline-block;
  cursor: pointer;
  font-family: $font-family;
  font-weight: 400;
  color: $white;
  text-align: center;
  text-decoration: none;
  padding: .375rem .875rem;
  margin-top: .5rem;
  border-radius: .25rem;

  &:hover {
    color: $white;
  }

  &--block {
    display: block;
    width: 100%;
  }

  &--primary {
    background-color: $btn-primary;
    border: .125rem solid $btn-primary;
  }

  &--secondary {
    background-color: $btn-secondary;
    border: .125rem solid $btn-secondary;
  }

  &--success {
    background-color: $btn-success;
    border: .125rem solid $btn-success;
  }

  &--warning {
    background-color: $btn-warning;
    border: .125rem solid $btn-warning;
  }

  &--danger {
    background-color: $btn-danger;
    border: .125rem solid $btn-danger;
  }

  &--info {
    background-color: $btn-info;
    border: .125rem solid $btn-info;
  }

  &--light {
    color: $black-90;
    background-color: $btn-light;
    border: .125rem solid $btn-light;

    &:hover {
      color: $black-90;
    }
  }

  &--dark {
    background-color: $btn-dark;
    border: .125rem solid $btn-dark;
  }

  // Buttons sizes
  &--small {
    padding: .25rem 1rem;
    font-size: .875rem;
  }

  &--large {
    padding: .5rem 2rem;
    font-size: 2.25rem;
  }

  &--x-large {
    padding: 1rem 2rem;
    font-size: 3rem;
  }
}

// Outline buttons
.btn-outline {

  &--primary {
    color: $btn-primary;
    border: .125rem solid $btn-primary;

    &:hover {
      color: $white;
      background-color: $btn-primary;
    }
  }

  &--secondary {
    color: $btn-secondary;
    border: .125rem solid $btn-secondary;

    &:hover {
      color: $white;
      background-color: $btn-secondary;
    }
  }

  &--success {
    color: $btn-success;
    border: .125rem solid $btn-success;

    &:hover {
      color: $white;
      background-color: $btn-success;
    }
  }

  &--warning {
    color: $btn-warning;
    border: .125rem solid $btn-warning;

    &:hover {
      color: $white;
      background-color: $btn-warning;
    }
  }

  &--danger {
    color: $btn-danger;
    border: .125rem solid $btn-danger;

    &:hover {
      color: $white;
      background-color: $btn-danger;
    }
  }

  &--info {
    color: $btn-info;
    border: .125rem solid $btn-info;

    &:hover {
      color: $white;
      background-color: $btn-info;
    }
  }

  &--light {
    color: $btn-light;
    border: .125rem solid $btn-light;

    &:hover {
      color: $black;
      background-color: $btn-light;
    }
  }

  &--dark {
    color: $btn-dark;
    border: .125rem solid $btn-dark;

    &:hover {
      color: $white;
      background-color: $btn-dark;
    }
  }
}

// Alerts
.alert {
  display: block;
  width: 100%;
  font-family: $font-family;
  font-size: 1rem;
  padding: .5rem 1rem;
  margin-top: .5rem;

  &--primary {
    color: $black-90;
    background-color: $alert-primary;
  }

  &--secondary {
    color: $black-90;
    background-color: $alert-secondary;
  }

  &--success {
    color: $black-90;
    background-color: $alert-success;
  }

  &--warning {
    color: $black-90;
    background-color: $alert-warning;
  }

  &--danger {
    color: $black-90;
    background-color: $alert-danger;
  }

  &--info {
    color: $black-90;
    background-color: $alert-info;
  }

  &--light {
    color: $black-90;
    background-color: $alert-light;
  }

  &--dark {
    color: $white;
    background-color: $alert-dark;
  }
}

// Removes nav margin on last menu link
nav a:last-child {
  margin-right: 0;
}

// Full screen width
.full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

// Header captions
body span a {
  font-weight: 300;
  color: $figcaption-color;
  &:hover {
    color: $figcaption-color;
  }
}

// Horizontal rules
hr {
  max-width: 100%;
  height: 1px;
  padding: 0;
  border: 0;
  border-top: 1px solid $hr-color;
}

// Definition list
dt {
  font-weight: bold;	
  margin-top: 1rem;
}

dd {	
  margin-left: 1rem;
}

// Abbreviation
abbr[title] {
  cursor: help;
  text-decoration: none;
  border-bottom: 1px dotted $abbr-color;
}

// Bold text
b, strong {
  font-weight: 600;
}

// Mark tag
mark {
  background-color: $mark-color;
}

// Image captions
figcaption {
  font-size: .875rem;
  font-weight: 300;
  color: $figcaption-color;
}

// Tables
table {	
  border-collapse: collapse;
  border-spacing: 0;
}

table thead {
  background-color: $table-header-color;
}

table, th, td {
  padding: .5rem;
  border: 1px solid $table-border-color;
}

// Blockquotes
blockquote {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  padding-left: 1rem;
  margin: 4rem 0 4rem 0;
  color: $blockquote-color;
  border-left: .25rem solid $blockquote-border-color;

  @media (min-width: 30em) {
    font-size: 1.5rem;
    padding-left: 1.5rem;
  }

}

blockquote cite {
  font-size: .875rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  
}

// Override Tachyons
figure {
  margin: .25rem 0; // Removes Tachyons default 40px left/right margins on codeblocks
}

body {
  margin: 0; // Removes Tachyons default body margin for header

}

.link:focus { // Removes Tachyons default link outline
  outline: 0; 
}

// Codeblocks
code, pre {
  font-family: $code-font-family;
  font-size: $code-font-size;
  font-weight: $code-font-weight;
}

pre {
  @extend .pre;
  margin: 0;
  padding: 1rem;
}

p > code {
  border-right: .25rem;
  padding: .25rem;
  background-color: $code-background-color;
}

.highlight {
  background-color: $code-background-color;

  table {
    margin: 0;
    border: 0;

    tr {
      border: 0;
    }

    td {
      border: 0;
      padding: 0;
    }

  }

  // Codeblock line numbers styling
  @mixin unselectable() {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .lineno {
    @include unselectable();
    color: $linenos-color;
  }

  .language-shell::before {
    @include unselectable();
    content: "$";
    color: $linenos-color;
    padding-right: .5rem;
  }

  .lineno {
    padding: 0;
  }
  
  // Syntax highlighting
  .c     { color: $silver; font-style: italic } // Comment
  .err   { color: #a61717; background-color: #e3d2d2 } // Error
  .k     { font-weight: bold } // Keyword
  .o     { font-weight: bold } // Operator
  .cm    { color: $silver; font-style: italic } // Comment.Multiline
  .cp    { color: #999; font-weight: bold } // Comment.Preproc
  .c1    { color: $silver; font-style: italic } // Comment.Single
  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
  .ge    { font-style: italic } // Generic.Emph
  .gr    { color: #a00 } // Generic.Error
  .gh    { color: #999 } // Generic.Heading
  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
  .go    { color: #888 } // Generic.Output
  .gp    { color: $linenos-color } // Generic.Prompt
  .gs    { font-weight: bold } // Generic.Strong
  .gu    { color: #aaa } // Generic.Subheading
  .gt    { color: #a00 } // Generic.Traceback
  .kc    { font-weight: bold } // Keyword.Constant
  .kd    { font-weight: bold } // Keyword.Declaration
  .kp    { font-weight: bold } // Keyword.Pseudo
  .kr    { font-weight: bold } // Keyword.Reserved
  .kt    { color: #458; font-weight: bold } // Keyword.Type
  .m     { color: #099 } // Literal.Number
  .s     { color: #d14 } // Literal.String
  .na    { color: #008080 } // Name.Attribute
  .nb    { color: #0086B3 } // Name.Builtin
  .nc    { color: #458; font-weight: bold } // Name.Class
  .no    { color: #008080 } // Name.Constant
  .ni    { color: #800080 } // Name.Entity
  .ne    { color: #900; font-weight: bold } // Name.Exception
  .nf    { color: #900; font-weight: bold } // Name.Function
  .nn    { color: #555 } // Name.Namespace
  .nt    { color: #000080 } // Name.Tag
  .nv    { color: #008080 } // Name.Variable
  .ow    { font-weight: bold } // Operator.Word
  .w     { color: #bbb } // Text.Whitespace
  .mf    { color: #099 } // Literal.Number.Float
  .mh    { color: #099 } // Literal.Number.Hex
  .mi    { color: #099 } // Literal.Number.Integer
  .mo    { color: #099 } // Literal.Number.Oct
  .sb    { color: #d14 } // Literal.String.Backtick
  .sc    { color: #d14 } // Literal.String.Char
  .sd    { color: #d14 } // Literal.String.Doc
  .s2    { color: #d14 } // Literal.String.Double
  .se    { color: #d14 } // Literal.String.Escape
  .sh    { color: #d14 } // Literal.String.Heredoc
  .si    { color: #d14 } // Literal.String.Interpol
  .sx    { color: #d14 } // Literal.String.Other
  .sr    { color: #009926 } // Literal.String.Regex
  .s1    { color: #d14 } // Literal.String.Single
  .ss    { color: #990073 } // Literal.String.Symbol
  .bp    { color: #999 } // Name.Builtin.Pseudo
  .vc    { color: #008080 } // Name.Variable.Class
  .vg    { color: #008080 } // Name.Variable.Global
  .vi    { color: #008080 } // Name.Variable.Instance
  .il    { color: #099 } // Literal.Number.Integer.Long
}
  
// Tachyons Background Overlays v1.1.0 https://github.com/lowmess/tachyons-background-overlays
.bg-darken-0 { box-shadow: none; }
.bg-darken-25 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
.bg-darken-50 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
.bg-darken-75 { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
.bg-lighten-0 { box-shadow: none; }
.bg-lighten-25 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
.bg-lighten-50 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
.bg-lighten-75 { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
@media screen and (min-width: 30em) {
 .bg-darken-0-ns { box-shadow: none; }
 .bg-darken-25-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
 .bg-darken-50-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
 .bg-darken-75-ns { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
 .bg-lighten-0-ns { box-shadow: none; }
 .bg-lighten-25-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
 .bg-lighten-50-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
 .bg-lighten-75-ns { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
 .bg-darken-0-m { box-shadow: none; }
 .bg-darken-25-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
 .bg-darken-50-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
 .bg-darken-75-m { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
 .bg-lighten-0-m { box-shadow: none; }
 .bg-lighten-25-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
 .bg-lighten-50-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
 .bg-lighten-75-m { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
}
@media screen and (min-width: 60em) {
 .bg-darken-0-l { box-shadow: none; }
 .bg-darken-25-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .25 ); }
 .bg-darken-50-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .5 ); }
 .bg-darken-75-l { box-shadow: inset 0 0 0 9999px rgba( 0, 0, 0, .75 ); }
 .bg-lighten-0-l { box-shadow: none; }
 .bg-lighten-25-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .25 ); }
 .bg-lighten-50-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .5 ); }
 .bg-lighten-75-l { box-shadow: inset 0 0 0 9999px rgba( 255, 255, 255, .75 ); }
}