// styles in src/style directory are applied to the whole page

@mixin text-stroke-horizontal($width: 4px, $color: white) {
  $text-shadow: ();
  @for $w from -$width through $width {
    $text-shadow: append($text-shadow, $w 0 $color, comma);
  }
  text-shadow: $text-shadow;
}

.navbar {
  background: rgba(255,255,255,0.95);
}

.bd-booticon {
  margin: 1.25rem;
  width: 256px;
  height: 256px;
}

.bd-masthead, .jumbotron {
  background-color: #0143A3;
  background: linear-gradient(135deg, #0143A3, #0273D4);
}

.bd-masthead {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
  text-align: center;
  color: #efefef;

  .lead {
    margin-right: auto;
    margin-bottom: 2rem;
    margin-left: auto;
    width: 80%;
    font-size: 2rem;
    color: #fff;
  }

  .btn {
    color: #fff;
    border-color: #fff;
    &:hover {
      background-color: #f7f7f7;
      color: #0273D4;
    }
  }
}

.jumbotron {
  color: #fff;
  border-radius: 0;
}

.github-buttons {

  header & {
    margin-bottom: 0;
    margin-top: 4px;
    padding-left: 0;
  }

  ngbd-default & {
    text-align: center;
    margin-top: 2rem;
  }
}

@media (min-width: 768px) {
  .bd-sidebar {
    padding-left: 1rem
  }
}

.bd-toc-link {
  display: block;
  padding: .25rem .75rem;
  color: #55595c;
}

.bd-toc-link:focus,
.bd-toc-link:hover {
  color: #0275d8;
  text-decoration: none;
}

.active > .bd-toc-link {
  font-weight: 500;
  color: #373a3c;
}

.bd-toc-item.active {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.bd-toc-item:first-child {
  margin-top: 0;
}

.bd-toc-item:last-child {
  margin-bottom: 2rem;
}

.bd-sidebar .nav > li > a {
  display: block;
  padding: .25rem .75rem;
  font-size: 90%;
  color: #99979c;
}

.bd-sidebar .nav > li > a:focus,
.bd-sidebar .nav > li > a:hover {
  color: #0275d8;
  text-decoration: none;
  background-color: transparent;
}

.bd-sidebar .nav > .active:focus > a,
.bd-sidebar .nav > .active:hover > a,
.bd-sidebar .nav > .active > a {
  font-weight: 500;
  color: #373a3c;
  background-color: transparent;
}

div.api-doc-component {
  margin-bottom: 20px;
}

div.api-doc-component > h2 > a {
  text-decoration: none;
}

div.api-doc-component > h2 > a:hover {
  text-decoration: none;
}

div.api-doc-component > h2 {
  margin-top: 0.2em;
  margin-bottom: 1rem;
  line-height: 0.85em;
  @include text-stroke-horizontal;
  box-shadow: 0 1px #fff, 0 3px #0275d8;
  word-spacing: 0.5em;
  font-size: 2.5em;
  border-bottom: 2px solid #fff;
  display: table;

  &:hover {
    border-bottom: 2px solid #fff;
    box-shadow: 0 1px #fff, 0 3px #014c8c;
    text-decoration: none;

    & > .fragment {
      display: inline-block;
    }
  }
}

a.fragment {
  display: none;
  line-height: inherit;
  position: absolute;
  margin-left: -1.2em;
  padding-right: 0.5em;

  & > img {
    width: 1em;
    height: 1em;
  }
}

div.component-demo {
  margin-bottom: 15px;
}

.bd-footer {
  padding: 3rem 0;
  margin-top: 3rem;
  font-size: 85%;
  background-color: #f7f7f7;
  text-align: left;

  p {
    margin-bottom: 0;
  }

  a {
    font-weight: 500;
    color: #55595c;
  }
}


section {
  margin-top: 30px;
}

section h3 {
  margin-bottom: 10px;
}

// override prism theme background color to inline it with bootstrap colors
code[class*="language-"],
pre[class*="language-"] {
  background-color: #f5f5f5; // same as bootstrap card header
}

span.token.tag {
  font-size: 1em;
  padding: 0;
}