/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 10rem tall */
.page {
  padding-top: 0 !important;
}

/* Reset */
.no-border {
  border: none;
}

.no-background {
  background-image: none !important;
}

.content-scroll {
  position: relative;
}

.dropdown-select select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; /* remove default arrow */
}

.dropdown-select:after {
    content: '⏷';
    position: absolute;
    left: 85%;
    right: 0;
    top: 15%;
    bottom: 0;
    color: $white;
}

// toggle buttons for animations

.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 62px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
  vertical-align:middle;
}

.toggle:before {
  content: "on off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;

  font-weight: bold;
  text-indent: -22px;
  word-spacing: 37px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background-color: #4CD964;
}

.toggle:checked:before {
  left: 32px;
}


#https-switch:checked ~ #https-content {
  display: inline;
}

#https-switch:checked ~ #http-content {
  display: none;
}

#tor-switch:checked ~ #http-content {
  display: none;
}

#tor-switch:checked ~ #tor-content {
  display: inline;
}

#https-switch:checked ~ #tor-switch:checked ~ .switch-on {
    display: inline;
}

#https-switch:checked ~ #tor-switch:checked ~ .switch-off {
    display: none;
}

#https-content {
  display: none;
}

#tor-content {
  display: none;
}

#https-tor-content {
  display: none;
}

// Define darker background
.bg-darker{
  background-color: $purple-darker;
}

.bg-black {
  background-color: black;
}

/*
 * Typography
 */

@font-face {
  font-family: Source Sans Pro;
  src: url('../fonts/SourceSansPro/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: Source Sans Pro Light;
  src: url('../fonts/SourceSansPro/SourceSansPro-Light.ttf');
}

@font-face {
  font-family: Source Sans Pro Bold;
  src: url('../fonts/SourceSansPro/SourceSansPro-Bold.ttf');
}

@font-face {
  font-family: Source Serif Pro;
  src: url('../fonts/SourceSerifPro/SourceSerifPro-Regular.ttf');
}

@font-face {
  font-family: Source Code Pro;
  src: url('../fonts/SourceCodePro/SourceCodePro-Regular.ttf');
}

@font-face {
  font-family: Hanuman Black;
  src: url('../fonts/Hanuman/Hanuman-Black.ttf');
}

@font-face {
  font-family: Hanuman Light;
  src: url('../fonts/Hanuman/Hanuman-Light.ttf');
}

@font-face {
  font-family: Hanuman Bold;
  src: url('../fonts/Hanuman/Hanuman-Bold.ttf');
}

@font-face {
  font-family: Hanuman Regular;
  src: url('../fonts/Hanuman/Hanuman-Regular.ttf');
}

@font-face {
  font-family: Hanuman Thin;
  src: url('../fonts/Hanuman/Hanuman-Thin.ttf');
}

@font-face {
  font-family: Tor Icons;
  src: url('../fonts/TorIcons/tor-icons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/TorIcons/tor-icons.woff2') format('woff2'),
  url('../fonts/TorIcons/tor-icons.woff') format('woff'),
  url('../fonts/TorIcons/tor-icons.ttf') format('truetype'),
  url('../fonts/TorIcons/tor-icons.svg?#tor-icons') format('svg');
}

.ti:before {
    font-family: Tor Icons !important;
    font-style: normal;
    font-weight: normal !important;
    vertical-align: top;
}

.ti-authority:before {
    content: "\f101";
}
.ti-badexit:before {
    content: "\f102";
}
.ti-bridge:before {
    content: "\f103";
}
.ti-country:before {
    content: "\f104";
}
.ti-directory:before {
    content: "\f105";
}
.ti-exit:before {
    content: "\f106";
}
.ti-fallbackdir:before {
    content: "\f107";
}
.ti-fast:before {
    content: "\f108";
}
.ti-fingerprint:before {
    content: "\f109";
}
.ti-guard:before {
    content: "\f10a";
}
.ti-hibernating:before {
    content: "\f10b";
}
.ti-hsdir:before {
    content: "\f10c";
}
.ti-ipv4:before {
    content: "\f10d";
}
.ti-ipv6:before {
    content: "\f10e";
}
.ti-ipv6exit:before {
    content: "\f10f";
}
.ti-noedconsensus:before {
    content: "\f110";
}
.ti-notrecommended:before {
    content: "\f111";
}
.ti-onion-alt:before {
    content: "\f112";
}
.ti-onion:before {
    content: "\f113";
}
.ti-reachableipv4:before {
    content: "\f114";
}
.ti-reachableipv6:before {
    content: "\f115";
}
.ti-relay:before {
    content: "\f116";
}
.ti-running:before {
    content: "\f117";
}
.ti-stable:before {
    content: "\f118";
}
.ti-tshirt:before {
    content: "\f119";
}
.ti-unmeasured:before {
    content: "\f11a";
}
.ti-unreachableipv4:before {
    content: "\f11b";
}
.ti-unreachableipv6:before {
    content: "\f11c";
}
.ti-v2dir:before {
    content: "\f11d";
}
.ti-valid:before {
    content: "\f11e";
}

.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: 'Source Sans Pro Light', sans-serif;
}

.font-family-serif {
  font-family: $font-family-serif !important;
}
.font-weight-light {
  font-family: "Source Sans Pro Light", sans-serif;
}
.font-weight-bold {
  font-family: Source Sans Pro Bold
 }

small, .small{
  font-size: 90%;
}

h6 {

  font-weight: bold;
  color: $purple;
}
p {
  font-size: 1.3rem; // We need at least 18px minuim +_+
  color: $gray-900;
  line-height: 2rem;
}
.display-5 {
  font-size: 1.5em;
}
.display-6 {
  font-size: 1.3em
}
mark, .mark {
  color: $purple;
}

.bd-sidebar{
  border: 0 !important;
}
.bd-toc{
  order: 0 !important;
}

#components-nav .nav-pills .nav-link,
#visuals-nav .nav-pills .nav-link{
  border-radius: 0;
}
#components-nav .nav-pills .nav-link.active,
#visuals-nav .nav-pills .nav-link.active{
  background-color: $white;
  color: $purple;
  border-left: 2px solid $purple;
  font-weight: bold;
}

/* prevent reordering of characters in code samples
 * on rtl pages, see tpo/community/l10n#40120
 */
code:dir(rtl) {
  unicode-bidi: plaintext;
}

/*
 * Nav
 */
.navbar {
  background-image: url('./images/onion-bg.svg');
  background-repeat: no-repeat;
  background-position: 10px 12px;
}

.navbar-brand {
  span {
    font-size: 0.6em;
    display: flex;
  }
}

.nav-link {
    display: block;
    padding: 1rem;
}

/*
 * Sidebar
 */

.sidetopics {
  z-index: 1000;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidetopics .nav {
  margin-bottom: 20px;
}

.sidetopics .nav-item {
  width: 100%;
}

.sidetopics .nav-item + .nav-item {
  margin-left: 0;
}

.sidetopics .nav-link {
  border-radius: 0;
}

.toc-h4 {
  padding-left: 0.8em;
  font-size: 0.9em;
}

// Styleguide Nav Update

// All levels of nav
.bd-sidebar .nav > li > a {
  font-size: 100%;
  color: rgba(0, 0, 0, .85);
}

.bd-sidebar .nav > li > a:hover {
  color: $purple !important;
  text-decoration: none;
}

#bd-docs-nav{
  padding-top: 2rem;
}

.dropdown{
  display: block;
}

.dropdown-menu {
    margin: 0;
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
    overflow-y: scroll;
    max-height: 350px;
}

.dropdown .btn {
    border-radius: 0;
}

.btn {text-transform: none;}

label {
  cursor: pointer;
}

#menu-toggle {
  display: none; /* hide the checkbox */
}

#nav-toggle {
  display: none; /* hide the checkbox */
}

.side-toggler {
  float:right !important;
}

#menu-toggle:checked + .burger-menu {
  display: block;
}

#nav-toggle:checked + .hamburger-menu {
  display: block;
}

a.side-nav.active {
    color: $primary !important;
}

.smalltopics {
    display: none;
}

/*
 * Dashboard
 */

/* Placeholders */
.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/*
 * Forms
 */
.form-wide {
  width: 100% !important;

  input {
    padding: 20px !important;
  }
}

//
// Text variations
//

.text-tpo {
  font-family: $font-family-sans;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7rem;
}


//
// Badges
//
.badge{

}

//
// Breadcrumbs
//
.breadcrumb{
  background-color: $white;
}

//
// Cards
//
.card-body p{
  font-size: 1.1rem;
  line-height: 1.7rem;
}

//
// Tables
//

table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $spacer;
  background-color: $table-bg; // Reset for nesting within parents with `background-color`.

  th,
  td {
    padding: $table-cell-padding;
    vertical-align: top;
    border-top: $table-border-width solid $table-border-color;
  }

  thead th {
    vertical-align: bottom;
    border-bottom: (calc(#{$table-border-width} * 2)) solid $table-border-color;
  }

  tbody + tbody {
    border-top: (calc(#{$table-border-width} * 2)) solid $table-border-color;
  }

  .table {
    background-color: $body-bg;
  }

  tbody tr:nth-of-type(odd) {
    background-color: $table-accent-bg;
  }
}

.table-striped td{
  border: 0 !important;
}

//
// Callouts
//
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
}

.bd-callout h4 {
  margin-top: 0;
  margin-bottom: .25rem;
}

.bd-callout p:last-child {
  margin-bottom: 0;
}

.bd-callout code {
  border-radius: .25rem;
}

.bd-callout + .bd-callout {
  margin-top: -.25rem;
}

// Images

.image-thumb {
  object-fit: cover;
  width: 100px;
  height: 100px;
}

// Variations
@mixin bs-callout-variant($color) {
  border-left-color: $color;

  h4 { color: $color; }
}

.bd-callout-info { @include bs-callout-variant($bd-info); }
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
.bd-callout-danger { @include bs-callout-variant($bd-danger); }

// Styleguide Nav Update

// All levels of nav
.bd-sidebar .nav > li > a {
  color: rgba(0, 0, 0, .85);
}

.bd-sidebar .nav > li > a:hover {
  color: $purple !important;
  text-decoration: none;
}

#bd-docs-nav{
  padding-top: 2rem;
}

// stylelint-disable declaration-block-single-line-max-declarations

.hll { background-color: #ffc; }
.c { color: #999; }
.k { color: #069; }
.o { color: #555; }
.cm { color: #999; }
.cp { color: #099; }
.c1 { color: #999; }
.cs { color: #999; }
.gd { background-color: #fcc; border: 1px solid #c00; }
.ge { font-style: italic; }
.gr { color: #f00; }
.gh { color: #030; }
.gi { background-color: #cfc; border: 1px solid #0c0; }
.go { color: #aaa; }
.gp { color: #009; }
.gu { color: #030; }
.gt { color: #9c6; }
.kc { color: #069; }
.kd { color: #069; }
.kn { color: #069; }
.kp { color: #069; }
.kr { color: #069; }
.kt { color: #078; }
.m { color: #f60; }
.s { color: #d44950; }
.na { color: #4f9fcf; }
.nb { color: #366; }
.nc { color: #0a8; }size
.no { color: #360; }
.nd { color: #99f; }
.ni { color: #999; }
.ne { color: #c00; }
.nf { color: #c0f; }
.nl { color: #99f; }
.nn { color: #0cf; }
.nt { color: #2f6f9f; }
.nv { color: #033; }
.ow { color: #000; }
.w { color: #bbb; }
.mf { color: #f60; }
.mh { color: #f60; }
.mi { color: #f60; }
.mo { color: #f60; }
.sb { color: #c30; }
.sc { color: #c30; }
.sd { font-style: italic; color: #c30; }
.s2 { color: #c30; }
.se { color: #c30; }
.sh { color: #c30; }
.si { color: #a00; }
.sx { color: #c30; }
.sr { color: #3aa; }
.s1 { color: #c30; }
.ss { color: #fc3; }
.bp { color: #366; }
.vc { color: #033; }
.vg { color: #033; }
.vi { color: #033; }
.il { color: #f60; }

.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }

.language-bash::before,
.language-sh::before {
  color: #009;
  content: "$ ";
  user-select: none;
}

.language-powershell::before {
  color: #009;
  content: "PM> ";
  user-select: none;
}

.text-primary-light {
  color: $bd-purple-light;
}

.dropdown{
  display: block;
}

.dropdown-menu {
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.mobile {
    display: none !important;
}

// Sticky menu
.sticky {
  position: sticky;
  top: 105px;
  z-index: 999;
}

@include media-breakpoint-down(md) {
  .d-sm-block.sticky {
    position: static !important;
  }
}

// Small devices (landscape phones, less than 768px)
@include media-breakpoint-down(sm) {
    .mobile {
        display: block !important;
	      padding-top: 50px;
    }

    .display-1 {
      font-size: 4rem;
    }

    .display-2 {
      font-size: 3.5rem;
    }

    .display-3{
      font-size: 2.5rem;
    }

    .display-4{
      font-size: 2rem;
    }

}

// Footer //

.footer a.nav-link {
  padding: 0.2rem;
}
footer .border{
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
.footer a.nav-link {
  padding: 0.2rem;
}

label {
  cursor: pointer;
}

#menu-toggle {
  display: none; /* hide the checkbox */
}

#nav-toggle {
  display: none; /* hide the checkbox */
}

.side-toggler {
  float:right !important;
}

#menu-toggle:checked + .burger-menu {
  display: block;
}

#nav-toggle:checked + .hamburger-menu {
  display: block;
}


a.side-nav.active {
  color: $primary !important;
}

.smalltopics {
  display: none;
}

[data-toggle="collapse"] .fas::before {
  content: "\f077";
}

[data-toggle="collapse"].collapsed .fas::before {
  content: "\f078";
}

// Small devices (landscape phones, less than 768px)
@include media-breakpoint-down(sm) {
  nav.sidetopics {
    display: none !important;
    visibility: hidden !important;
  }

  nav.smalltopics {
    display: block;
    width:100%;
    position: sticky;
    padding-top: inherit;
  }
}


// Tablet and Mobile menu
@include media-breakpoint-down(md) {
  .nav-link {
    padding-bottom: 1rem;
    padding-top: 2rem;
    font-size: 150%;
  }
}

.no-gutters {
  margin-bottom: 0 !important;
}

.errors {
  color: red;
  font-size: 1.3rem;
}

.btn-purple {
  background-color: $purple;
  color: $white;

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