@import '../../assets/scss/colors';
@import '../../assets/scss/functions';
@import '../../assets/scss/mixins';
@import '../../assets/scss/variables';

// Bootstrap doc CSS override

.bd-callout {
  border: 0;
  border-left: $blockquote-border-width solid $blockquote-border-color;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: $paragraph-margin-y;
  padding: 0 $spacer;

  + .bd-callout {
    margin-top: 0;
  }
}

.bd-callout-danger {
  border-left-color: theme-color(danger);

  h5 {
    color: theme-color(danger);
  }
}

.bd-callout-info {
  border-left-color: theme-color(info);

  h5 {
    color: theme-color(info);
  }
}

.bd-callout-warning {
  border-left-color: theme-color(warning);

  h5 {
    color: theme-color(warning);
  }
}

// stylelint-disable selector-max-compound-selectors, selector-max-type
.bd-content > table {
  border: $table-border-width solid $table-border-color;

  > tbody,
  > tfoot,
  > thead {
    > tr {
      > td,
      > th {
        border: 0;
        border-top: $table-border-width solid $table-border-color;
        line-height: $table-line-height;
        padding-right: $table-cell-padding-x;
        padding-left: $table-cell-padding-x;

        &:first-child {
          padding-left: $table-cell-padding-x-alt;
        }

        &:last-child {
          padding-right: $table-cell-padding-x-alt;
        }
      }
    }
  }

  > tbody {
    color: $table-tbody-color;

    > tr {
      &:nth-of-type(#{$table-striped-order}) {
        background-color: $table-bg-accent;
      }

      > td,
      > th {
        font-size: $table-tbody-font-size;
        font-weight: $table-tbody-font-weight;
        height: $table-tbody-cell-height;
        padding-top: $table-tbody-padding-y;
        padding-bottom: $table-tbody-padding-y;
      }
    }
  }

  > tfoot {
    color: $table-tfoot-color;

    > tr {
      > td,
      > th {
        font-size: $table-tfoot-font-size;
        font-weight: $table-tfoot-font-weight;
        height: $table-tfoot-cell-height;
        padding-top: $table-tfoot-padding-y;
        padding-bottom: $table-tfoot-padding-y;
      }
    }
  }

  > thead {
    color: $table-thead-color;

    > tr {
      > td,
      > th {
        font-size: $table-thead-font-size;
        font-weight: $table-thead-font-weight;
        height: $table-thead-cell-height;
        padding-top: $table-thead-padding-y;
        padding-bottom: $table-thead-padding-y;
      }
    }
  }
}
// stylelint-enable

.bd-example {
  background-color: $body-bg;
  border: $border-width solid $border-color;
  margin: 0;
  padding: $spacer-lg;

  .bd-example + & {
    @include border-top-radius(0);

    border-top: 0;
    margin-top: ($border-width * -1);
  }

  .custom-file-input:lang(es) ~ .custom-file-label::after {
    content: $custom-file-button-icon;
  }

  > .dropdown-menu:first-child {
    position: relative;
    top: auto;
    left: auto;
  }

  > .list-group {
    max-width: 100%;
  }

  + p {
    margin-top: $paragraph-margin-y;
  }
}

.bd-example-modal .modal-dialog {
  margin-top: ($dialog-margin-y * 2);
  margin-bottom: ($dialog-margin-y * 2);
}

.btn-clipboard {
  top: $spacer-xs;
  right: $spacer-xs;
}

.highlight {
  background-color: $light-theme-2;
  margin: 0 0 $paragraph-margin-y;
  padding: $spacer-lg;
  position: relative;

  .bd-content & {
    margin-right: 0;
    margin-left: 0;
  }

  .bd-example + &,
  .bd-example + .bd-clipboard + & {
    border: $border-width solid $border-color;
    border-top: 0;
    margin-top: ($border-width * -1);
  }
}

.section-nav {
  border-left: $blockquote-border-width solid theme-color(secondary);
  position: sticky;
  top: $paragraph-margin-y;
}

// stylelint-disable selector-no-qualifying-type
.toc-entry {
  a {
    color: $nav-pills-color;
    opacity: $nav-pills-link-opacity;
    padding: ($nav-link-padding-y / 2) 0 ($nav-link-padding-y / 2) $spacer;

    @include active-focus-hover {
      color: $nav-pills-color;
      opacity: 1;
    }

    &.active {
      color: $nav-pills-color-active;
      opacity: 1;
    }
  }
}
// stylelint-enable

// CSS for accordion examples

.bd-example [id='accordion'] .btn-link[data-toggle='collapse'] {
  padding: 0;
}

// CSS to flatten buttons in card examples

// stylelint-disable selector-max-class
.bd-example .card {
  &.text-right .card-body .btn {
    margin-right: ($card-action-padding-x - $card-padding-x);
  }

  &:not(.text-center):not(.text-right) .card-body .btn {
    margin-left: ($card-action-padding-x - $card-padding-x);
  }

  .card-body {
    @each $color, $values in $theme-colors {
      .btn-#{$color} {
        @include plain-active-focus-hover {
          color: theme-color($color);
        }

        &.disabled,
        &:disabled {
          color: $btn-color-disabled;
        }
      }
    }

    &:last-child .btn:last-child {
      margin-bottom: ($card-action-padding-y - $card-padding-y);
    }

    &:not(:last-child) .btn:last-child {
      margin-bottom: ($card-action-padding-y - $card-inner-spacer-y);
    }

    .btn {
      background-color: transparent;
      box-shadow: none;
      min-width: $dialog-footer-btn-min-width;
      padding-right: $dialog-footer-inner-spacer-x;
      padding-left: $dialog-footer-inner-spacer-x;

      &.active,
      &:active {
        background-color: $btn-bg-active;
        box-shadow: none;
      }

      &.disabled,
      &:disabled {
        background-color: transparent;
      }
    }
  }
}
// stylelint-enable

// CSS to limit `.form-control` width in `.navbar` examples

.bd-example .navbar .form-control {
  width: 10rem;
}

// Docsearch

// stylelint-disable declaration-no-important
.algolia-autocomplete {
  .algolia-docsearch-footer {
    border-top: $border-width solid $border-color;
    color: $menu-link-color-disabled !important;
    font-size: $font-size-caption !important;
    line-height: $line-height-caption !important;
    padding: $menu-padding-y-cascading $menu-link-padding-x-cascading 0;
  }

  .algolia-docsearch-suggestion {
    color: $menu-link-color;
  }

  .algolia-docsearch-suggestion--category-header,
  .algolia-docsearch-suggestion--title {
    color: $menu-header-color !important;
    font-size: $menu-font-size-cascading !important;
    line-height: $menu-line-height-cascading;
    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading !important;
  }

  .ds-dropdown-menu {
    border: 0;
    border-radius: $menu-border-radius;
    box-shadow: map-get($menu-elevation-shadow, shadow);
    margin-top: 0;
    padding-top: $menu-padding-y-cascading !important;
    padding-bottom: $menu-padding-y-cascading !important;
    width: 100%;

    [class^='ds-dataset-'] {
      border-radius: 0;
    }
  }

  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
    background-color: $menu-link-bg-hover !important;
  }
}
// stylelint-enable

.doc-search:focus {
  z-index: 101;
}

// Project css

.doc-jumbotron {
  background-color: theme-color(primary);
  background-image: url('../images/doc-jumbotron-bg.jpg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: $white-primary;
  padding-top: ($toolbar-height * 2);

  @include media-breakpoint-down(sm) {
    h1 {
      @include typography-display-3;
    }
  }

  @include media-breakpoint-up(lg) {
    .navdrawer-permanent-lg ~ & {
      margin-left: $navdrawer-width;
    }
  }

  h1:last-child,
  p:last-child {
    margin-bottom: 0;
  }
}

.doc-logo {
  @include typography-title;

  align-items: center;
  background-color: rgba(theme-color(secondary), $black-divider-opacity);
  border-radius: ($toolbar-element-height / 2);
  box-shadow: inset 0 0 0 $border-width currentColor;
  color: inherit;
  display: inline-flex;
  font-family: $font-family-serif;
  font-weight: 700;
  height: $toolbar-element-height;
  justify-content: center;
  line-height: 1;
  position: relative;
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: $toolbar-element-height;
  z-index: 1;

  &[href] {
    @include active-focus-hover {
      color: inherit;
      text-decoration: none;

      &::before {
        opacity: $black-divider-opacity;
      }
    }

    &::before {
      @include transition-standard(opacity);

      background-color: currentColor;
      border-radius: ($toolbar-element-height / 2);
      content: '';
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
  }

  &:focus {
    outline: 0;
  }
}

.doc-main {
  @include media-breakpoint-up(lg) {
    .navdrawer-permanent-lg ~ & {
      margin-left: $navdrawer-width;
    }
  }
}

.doc-navbar-permanent {
  margin-left: $navdrawer-width;
}

.doc-navbar-persistent,
.doc-navbar-temporary {
  @include transition-sharp(margin-left);
}

.doc-navbar-persistent {
  .navdrawer-open-persistent & {
    @include transition-deceleration(margin-left);

    margin-left: $navdrawer-width;
  }
}

.doc-navbar-temporary {
  .navdrawer-open-temporary & {
    @include transition-deceleration(margin-left);

    margin-left: $navdrawer-width;
  }
}

.doc-navdrawer-body {
  min-height: 100%;
}

.doc-skip {
  background-color: theme-color(primary);
  color: color-yiq(theme-color(primary));
  display: block;
  outline: 0;
  padding-top: (($toolbar-height - $font-size-base * $line-height-base) / 2);
  padding-bottom: (($toolbar-height - $font-size-base * $line-height-base) / 2);
  text-align: center;

  &:focus {
    color: color-yiq(theme-color(primary));
  }
}

.doc-skip-text {
  border: $border-width dotted currentColor;
  padding: $btn-padding-y $btn-padding-x;
}

.doc-swatch-text {
  font-family: $font-family-monospace;
}