// Custom overrides

//
// Colors
//

$inputcolor: #000000 !default;
$black: #000000 !default;
$box-shadow: rgba(0, 0, 0, 0.12);
$base-svg-path: $black !default;

//
// Base element style overrides
//

input {
  color: $inputcolor;
}

#sidebar.active {
  display: none;
}

.side-bar {
  @include mq(md) {
    &.active {
      display: none;
    }
  }
}

.main.sidebar-toggle {
  @include mq(md) {
    margin-left: calc((100% - 800px) / 2);
    max-width: 800px;
  }

  @include mq(lg) {
    margin-left: calc((100% - 900px) / 2);
    max-width: 900px;
  }
}

#sidebarCollapse {
  display: none;

  @include mq(md) {
    display: block;
  }

  &.new {
    background-color: $link-color;
    color: $white;

    &.colored {
      background-color: $base-button-color;
      color: $link-color;
    }
  }
}

//
//  navigation.css
//

.flex-container {
  align-items: baseline;
  display: flex;
  flex-direction: row;
}

.connector {
  height: 12px;
  margin-right: 5%;
  width: 12px;
}

.breadcrumb-nav {
  @include mq(md) {
    margin-top: $sp-4;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
}

.prev-next-controls {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;

  // Workaround for buttons bar overflow issues.
  a {
    overflow: inherit;
  }
}

//
// from selects.scss
//
select {
  background-color: $base-button-color;
  border: 0;

  option {
    color: $body-heading-color;
  }
}

//
// from scg_paths.scss
//
svg path {
  stroke: $base-svg-path;
}

defs path {
  stroke: none;
}

//
// from quiz.scss
//
$correct-color: #5cd65c;
$incorrect-color: #ff6666;
$default-color: #f1f1f1;
$border-color: #eeebee;
$shadow-color: #eeeeee;
$text-color: #111111;

.quiz {
  display: none;
}

.pop-quiz {
  display: block;
  margin-top: 100px;
  text-align: center;
}

.quiz-question {
  margin-bottom: 0.5rem;
  margin-top: 1rem;

  em {
    font-size: 0.9em;
  }

  p {
    font-size: 1.2em;
    margin-bottom: 0.5rem;
  }

  code {
    font-size: 0.9em;
  }
}

.quiz-answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .quiz-answer {
    background-color: $default-color;
    border: 1px solid $border-color;
    border-radius: 0.2rem;
    box-shadow: 1px 1px $shadow-color;
    color: $text-color;
    cursor: pointer;
    line-height: 2rem;
    margin: 0.2rem;
    min-width: 10rem;
  }
}

.quiz-show-answer {
  &.quiz-true {
    background-color: $correct-color;
  }

  &.quiz-false {
    background-color: $incorrect-color;
  }
}

//
// from search.scss (not included since its too different from upstream)
//

//
// DVLS new styles
// CV flavored side nav
//
.nav-list {
  list-style: circle url("/assets/images/nav-marker-inactive.svg") inside;

  .nav-list-item {
    // scss-lint:disable SelectorDepth
    .nav-list-link {
      display: inline;
    }

    &.active {
      list-style: disc url("/assets/images/nav-marker-active.svg") inside;
    }
  }

  .nav-list-item .nav-list-link {
    display: inline;
    padding-left: 0;
  }

  .nav-list-item.active {
    list-style: disc url("/assets/images/nav-marker-active.svg") inside;
  }
}

// Nested nav lists
.nav-list .nav-list-item > .nav-list .nav-list-item .nav-list-link {
  padding-left: 1rem;

  &.active {
    padding-left: 0;
  }
}

// table caption style
//.tblcap {
// to be defined
//}

.site-nav {
  padding-left: 1rem;
}

@media (min-width: 50rem) {
  // Sidebar Navigation
  .site-nav {
    padding-left: 2rem;
  }

  // Auxiliary Nav Styles for tablet and above
  .aux-nav {
    .aux-nav-list-item {
      align-items: center;
      display: flex;
    }

    .aux-nav-list {
      padding-left: 10px;
    }
  }

  .aux-nav-list-item .site-button {
    background-color: $base-button-color;
    border-radius: 3px;
    border-width: 0;
    box-shadow: 0 1px 2px $box-shadow, 0 3px 10px $box-shadow;
    height: 50%;
    margin-right: 0.5rem;
    padding: 0.5rem;
  }
}

// Disqus Recommendations
#disqus_recommendations {
  margin-top: 20px;
}

// Scroll Back to Top Button
.back-to-top {
  background-color: $link-color;
  color: $white;
  right: 15px;
  position: fixed;
  bottom: 15px;
}

// Added transitions
a,
h1,
h2,
h3,
h4,
h5,
button,
.main-content,
.side-bar,
.site-nav,
.search {
  transition: linear 0.3s;
}

.search-active .search-input,
.search-active .search-results {
  background-color: $body-background-color;
}

// progress-bar 
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: $link-color;
  width: 0%;
  z-index: 10000;
}
