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


@import 'theme.ng2v';
// @import 'theme';
@import 'bootstrap/bootstrap';
@import '../../../src/ng2v';

@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;
}

$v-green: #7ED321;
$d-green: darken(#7ED321, 10%); 

.bd-masthead, .jumbotron {
  background-color: $v-green;
  background: linear-gradient(180deg, $v-green, $d-green);
}

.bd-masthead { 
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 3rem;
  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;
  }

  ng2vd-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;
}

.route-links {
  display: none;

  &.is-visible {
    display: block;
  }
}

ng2vd-api-docs {
  code {
    border-radius: 0;
  }
}
@media (min-width: 576px){
  ng2vd-content-wrapper {
    .jumbotron {
      padding: .5rem 1rem;
      border-radius: 0;
    }
    h3, .h3 {
      font-size: 1.5rem;
    }
    div.api-doc-component > h2 {
      font-size: 1.5em;
    }
  }
  
}

.side-menu-demo {
  min-height: 450px;
  position: relative;
}


.ng2v-example {

  &:not(:first-child) h3 {
    margin-top: 25px;
  }

  br {
    display: block;
    margin-bottom: 10px;
  }
}


/////////////////////////////////////////////////////////
// =================== Additional CSS ================ //
/////////////////////////////////////////////////////////
ng2vd-example-box {
  .v-spacer {
    display: block;
    width: 100%;
    height: 10px;
  }
  .bd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    border-width: .2rem;
  }

  .bd-example-border-utils [class^=border-] {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    margin: .25rem;
    background-color: #f5f5f5;
    border: 1px solid;
  }

  .bd-example>.bg-danger:not(.navbar), 
  .bd-example>.bg-faded:not(.navbar), 
  .bd-example>.bg-info:not(.navbar), 
  .bd-example>.bg-inverse:not(.navbar), 
  .bd-example>.bg-primary:not(.navbar), 
  .bd-example>.bg-success:not(.navbar), 
  .bd-example>.bg-warning:not(.navbar) {
    padding: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
}

div.api-doc-component > h2 {
  box-shadow: 0 1px #fff, 0 3px #64a71a;
  a {
    color: linear-gradient(180deg, #7ED321, #64a71a);
  }
}