projectblacklight/blacklight

.sidenav {
  --bl-facets-smallish-padding: .25rem;
  --bl-facets-smallish-border: var(--bs-border-width) solid var(--bs-border-color);
  --bl-facets-smallish-margin-bottom: #{$spacer};
  --bl-facets-smallish-border-radius: #{$border-radius};

  .navbar-toggler {
    --bs-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
    --bs-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
    --bs-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
    color: $navbar-light-active-color;

    &:hover,
    &:focus {
      color: $navbar-light-active-color;
    }

    [data-hide-label] {
      display: inline;
    }
    [data-show-label] {
      display: none;
    }

    &[aria-expanded="false"] {
      [data-hide-label] {
        display: none;
      }
      [data-show-label] {
        display: inline;
      }
    }
  }
}

.facets-toggleable {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);


    &#{$infix} {
      @include media-breakpoint-down($next) {
        border: var(--bl-facets-smallish-border);
        padding: var(--bl-facets-smallish-padding);
        margin-bottom: var(--bl-facets-smallish-margin-bottom);
        border-radius: var(--bl-facets-smallish-border-radius);

      }
      @include media-breakpoint-up($next) {
        // scss-lint:disable ImportantRule
        .facets-collapse {
          display: block !important;
          width: 100%;
        }
        // scss-lint:enable ImportantRule

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}

.no-js {
  @include media-breakpoint-down(lg) {
    #sidebar {
      order: 6 !important;
    }
  }

  .facet-content.collapse {
    display: block;
  }

  .facet-toggle-handle {
    display: none;
  }

  .pivot-facet.collapse {
    display: block;
  }

  .facets-collapse.collapse {
    display: block;
  }
}

.facets-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.facets-heading {
  @extend .h4;
  line-height: inherit;
}

.facet-limit {
  margin-bottom: $spacer;

  .card-body {
    padding: $spacer;
  }
}

.facet-limit-active {
  border-color: $facet-active-border !important;

  .card-header {
    background-color: $facet-active-bg !important;

    .btn {
      @if function-exists(color-contrast) {
        color: color-contrast($facet-active-bg);
      }

      @if function-exists(color-yiq) {
        color: color-yiq($facet-active-bg);
      }
    }
  }
}

.facet-values {
  margin-bottom: 0;

  a {
    text-decoration: none;
  }

  li {
    display: flex;
    align-items: flex-start;
    padding: 3px 0;

    &[role="treeitem"] {
      display: block;
    }

    .selected {
      color: $facet-active-item-color !important;
    }
  }

  .remove {
    color: $text-muted;
    font-weight: bold;
    padding-left: $spacer * .5;
    text-decoration: none;

    &:hover {
      color: theme-color("danger");
      text-decoration: none;
    }
  }

  @mixin hyphens-auto {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
  }

  .facet-label {
    padding-right: 1em;
    text-indent: -15px;
    padding-left: 15px;
    @include hyphens-auto;
  }

  .facet-count {
    margin-left: auto
  }

  .facet-checkbox {
    width: 1.25rem;
  }
}

.facet-extended-list {
  .sort-options {
    text-align: right;
  }

  .prev-next-links {
    float: left;
  }
}

.facet-field-heading {
  @extend .h6;

  a {
    color: inherit;
  }

  /* This prevents the contained stretch link from covering the panel body */
  position: relative
}

/* Sidenav
-------------------------------------------------- */

.facet-pagination {
  &.top {
    padding: $modal-inner-padding;
  }
}

/* style for pivot facet's nested list */

.facet-values {
  @extend .list-unstyled;
}

.pivot-facet {
  &.show {
    @extend .d-flex;
  }
}

$facet-toggle-show-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" /></svg>') !default;
$facet-toggle-hide-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" /></svg>') !default;
$facet-toggle-width: 1em !default;
$facet-toggle-height: $facet-toggle-width !default;

.facet-toggle-handle {
  @extend .my-0;
  @extend .py-0;
  @extend .px-2;

  // keep the icon span centered in the button, but shift to the left for equal spacing inside row
  margin-left: -1 * $btn-padding-x;

  .pivot-facet & {
    // shift pivot values a little more aggressively for better compact display
    margin-left: -2 * $btn-padding-x;
  }

  &.collapsed {
    .show {
      display: flex;
    }

    .hide {
      display: none;
    }
  }

  .show {
    display: none;
  }

  .hide {
    display: flex;
  }

  .show .icon,
  .hide .icon {
    width: $facet-toggle-width;
    height: $facet-toggle-height;
    padding: $btn-padding-y $btn-padding-x;
  }

  .show .icon {
    background: transparent escape-svg($facet-toggle-show-icon) center / $facet-toggle-width auto no-repeat;
  }

  .hide .icon {
    background: transparent escape-svg($facet-toggle-hide-icon) center / $facet-toggle-width auto no-repeat;
  }
}