.mod_iso_productfilter {
  .filter-option {
    margin-bottom: 0.75rem;
  }

  a.clear_filters {
    @include font-size(13px);
    display: block;
    text-align: right;
  }
}

.mod_iso_cumulativefilter {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;

  .clearall,
  .filter-toggle-control {
    position: relative;
    margin: 0;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 0.3s ease;

    &:after {
      margin-left: 10px;
      display: inline-block;
    }
  }

  .clearall {
    color: var(--bs-primary);
    text-decoration: none;
    @include font-size(14px);
    margin-left: rfs-value(10px);

    &:after {
      //@include transition(all 0.25s);
      @extend %fa-icon;
      @extend .fal;
      content: fa-content($fa-var-times);
      //@include transform(translate(0, -50%));
    }

    &:hover {
      color: var(--bs-body-color);
    }
  }

  .filter-toggle-control {
    &:after {
      @extend %fa-icon;
      @extend .fas;
      content: fa-content($fa-var-angle-down);
    }
  }

  .filter-toggle {
    display: none;

    &:checked {
      + .filter-toggle-control {
        background-color: var(--bs-primary);
        border-radius: $border-radius $border-radius 0px 0px;

        &:before,
        &:after {
          transform: rotate(180deg);
        }
      }

      ~ .level_1 {
        height: 2.5em;
        opacity: 1;
        visibility: visible;

        @include media-breakpoint-down(lg) {
          min-height: 2.5em;
          height: auto;
        }
      }
    }
  }


  &.variant-v1 {
    ul {
      margin: 0;
      list-style-type: none;
      padding: 0px;

      &.level_1 {
        background-color: var(--bs-shop-filter-bg);
        border-radius: 0px $border-radius $border-radius $border-radius;
        color: var(--bs-body-color);
        text-transform: uppercase;
        font-weight: $font-weight-medium;
        display: flex;
        align-items: center;
        position: relative;
        //@include transition(all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94));

        > li {
          flex: 1 1 auto;
          text-align: center;
          position: relative;
          height: 100%;

          .filter-item {
            display: inline-block;
            position: relative;

            &:hover {
              .dropdown {
                visibility: visible;
                opacity: 1;
                display: block;
              }
            }

            .label {
              display: inline-block;
              padding-right: 1.43em;
              position: relative;
              line-height: 2.5em;

              &:after {
                pointer-events: none;
                display: inline-block;

                @extend %fa-icon;
                @extend .fas;
                content: fa-content($fa-var-angle-down);
                margin-left: 10px;
              }
            }

            .dropdown {
              transition: all 0.3s ease;
              min-width: 170px;
              max-width: 350px;
              opacity: 0;
              visibility: hidden;
              position: absolute;
              top: 100%;
              left: -20px;
              //@include transform(translate(-50%, 0));
              cursor: default;

              &.-large {
                width: 350px;
                max-width: calc(100vw - 40px);
              }

              ul {
                padding: 5px 20px;
                background-color: var(--bs-gray-100);
                @include border-radius(0px 0px $border-radius $border-radius);

                li {
                  text-align: left;
                  padding: 5px 0;

                  &.active {
                    a {
                      &:after {
                        opacity: 1;
                        visibility: visible;
                      }
                    }

                    strong {
                      color: var(--bs-primary);
                    }
                  }
                }
              }

              a,
              strong {
                //@include transition(all 0.25s);
                display: block;
                color: var(--bs-body-color);
                text-transform: uppercase;
                font-weight: 600;
                @include font-size(12px);
                letter-spacing: 0.2em 0.5em;
                line-height: var(--bs-body-line-height);
                position: relative;
                text-decoration: none;

                span {
                  display: inline-block;
                  vertical-align: top;
                }

                &:not(strong) {
                  &:before,
                  &:after {
                    top: 0.75em;
                    left: 10px;
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    margin-right: 10px;
                    content: "";
                    transition: all 0.3s ease;
                  }

                  &:before {
                    border: 1px $body-color solid;
                  }

                  &:after {
                    width: 16px;
                    height: 16px;
                    background-color: var(--bs-primary);
                    opacity: 0;
                    visibility: hidden;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                  }
                }

                &:hover {
                  color: var(--bs-primary);

                  &:after {
                    opacity: 0.7;
                    visibility: visible;
                  }
                }
              }
            }
          }

          &.trail {
            color: var(--bs-primary);
          }

          &.nav {
            .dropdown {
              max-width: none;

              .list-wrapper {
                margin-top: 2px;
                padding: 5px 20px;
                background-color: var(--bs-secondary);

                overflow: hidden;

                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                position: relative;
              }

              ul {
                margin-top: 0;
                padding: 0;
                background: none;

                > li {
                  width: 170px;

                  &:nth-child(1n + 6) {
                    margin-left: 30px;
                  }
                }
              }

              a,
              strong {
                padding-left: 0;

                &:before,
                &:after {
                  display: none;
                }
              }
            }
          }
        }

        @include media-breakpoint-down(lg) {
          @include font-size(12px);

          > li {
            padding: 0 10px;
          }
        }
        @include media-breakpoint-down(lg) {
          flex-direction: column;

          > li {
            padding: 0 20px;
            width: 100%;
            text-align: left;

            > .dropdown {
              height: auto;
              max-height: 0;
              position: relative;
              left: auto;
              right: auto;
              bottom: auto;
              top: auto;
              min-width: 0;
              max-width: none;
              overflow-y: auto;

              &.-large {
                width: auto;
                max-width: none;
              }

              a {
                pointer-events: none;
              }
            }

            &:hover,
            &:focus-within {
              > .dropdown {
                height: auto;
                max-height: 45em;
                visibility: visible;
                opacity: 1;
                display: block;

                a {
                  pointer-events: unset;
                }
              }
            }
          }
        }
      }
    }
  }

  &.variant-v2 {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: $mini-spacing;

    .clearall {
      width: 100%;
    }
  }


  &:not(.expanded) {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: height 0.3s ease;
  }
}
