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

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

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

.deprecated {
  h3 {
    text-decoration: line-through;
  }

  h5 {
    display: inline-block;
  }

  td.label-cell code, p.signature, code.selector, code.export-as {
    text-decoration: line-through;
  }

  .description, .meta, .lead {
    opacity: 0.5;
  }
}

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

    a {
      margin: 0 0.5rem;
    }
  }

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

  > iframe, > a {
    margin-left: 0.5rem;
  }
}

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

    display: inline-block;
    position: -webkit-sticky;
    position: sticky;
    top: 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: 3rem;

  > h2, > h3 {
    .github-link {
      transition: opacity .5s;
      opacity: .3;
    }

    &:hover {
      .github-link {
        opacity: 1;
      }
      & > .title-fragment {
        opacity: 1;
      }
    }
  }

  section {
    margin-top: 3rem;
    h4 {
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    .meta {
      font-size: .8rem;
      margin-bottom: 1rem;
      > div {
        margin-bottom: .5rem;
      }
    }
  }
}

a.title-fragment {
  opacity: 0;
  transition: opacity 125ms ease;
  line-height: inherit;
  position: absolute;
  margin-left: -1.2em;
  padding-right: 0.5em;

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

div.component-demo {
  margin-bottom: 3rem;
  h2 {
    margin-bottom: 1rem;

    .plunker, .stackblitz {
      text-decoration: none;
      opacity: 0.3;
      transition: opacity .5s;
      margin-left: 0.3rem;
    }
    &:hover {
      .plunker, .stackblitz {
        opacity: 1;
      }
      & > .title-fragment {
        opacity: 1;
      }
    }
  }

  .tabset-code {
    .nav {
      margin: 0;
      padding: .5rem 1.25rem 0;
      font-size: 80%;

      .nav-link.active {
        background-color: #f5f2f0;
        border-bottom: 1px solid #f5f2f0;
      }

      .nav-link:not(.active) {
        color: #999;
        &:hover {
          color: #666;
        }
      }
    }

    .tab-content {
      overflow: hidden;
    }

    pre {
      margin: 0;
    }
  }
}

.examples-legend {
  font-size: 80%;
}

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

ngbd-api-docs, ngbd-api-docs-class, ngbd-api-docs-config {
  display: block;

  &:not(:first-child) {
    margin-top: 3rem;
    border-top: 1px solid #999;
    padding-top: 1rem;
  }
}



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

ngbd-component-wrapper, ngbd-page-wrapper {
  .jumbotron {
    border-radius: 0;
  }
}

.root-nav {
  $offset: 73px;
  > .nav-tabs {
    transform: translateY(-$offset);

    .nav-link:not(.active) {
      color: #f9f9f9;
    }

    .nav-link:not(.active):hover {
      background-color: rgba(255,255,255, 0.15);
      border-color: rgba(255,255,255, 0.15);
    }
  }

  > .tab-content {
    transform: translateY(-$offset / 2);
  }
}

@mixin center-nav-tab-on-small-screens() {
  .jumbotron > .container {
    margin-bottom: 2rem;
    h1 {
      text-align: center;
    }
  }

  .root-nav {
    ul {
      justify-content: center !important;
    }
  }
}

@media (max-width: 768px) and (orientation:portrait) {
  @include center-nav-tab-on-small-screens();
}

@media (max-width: 568px) and (max-height: 320px)  {
  @include center-nav-tab-on-small-screens();
}

// Right-To-Left layout for the Islamic Calendars
ngb-datepicker.rtl {
	direction: rtl;
}

ngb-datepicker.rtl ngb-datepicker-navigation-select select.custom-select {
  background-position: left 0.25rem center;
}
// Useful to modify this to flex-start for multiple calendar only
ngb-datepicker.rtl .ngb-dp-arrow.right {
  justify-content: center;
}
// Useful to modify this to flex-end for multiple calendar only
ngb-datepicker.rtl .ngb-dp-arrow {
  justify-content: center;
}

ngb-datepicker.rtl .ngb-dp-arrow-btn {
  padding: 0;
}

ngb-datepicker.rtl .ngb-dp-arrow.right .ngb-dp-navigation-chevron:before {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  margin: 0 0 0 0.5rem;
}

ngb-datepicker.rtl .ngb-dp-navigation-chevron::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  margin: 0 0.5rem 0 0;
}