/*

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 {

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

}

.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 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 ); }

}