.filter-fieldset {
  padding: 17px 17px 27px;
  border: 1px solid #d7d7d7;

  &:not(:last-of-type) {
    margin-bottom: 17px;
  }

  a {
    cursor: pointer;
  }

  label {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }

  input[type="checkbox"],
  input[type="radio"] {
    display: none;

    + a label {
      padding-left: 26px;

      &::before {
        position: absolute;
        top: 4px;
        left: 2px;
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 9px;
        height: 9px;
        border: 1px solid #d7d7d7;
      }
    }

    &:checked + a label {
      font-weight: 700;

      &::before {
        box-shadow: inset 0 0 0 2px #fff;
        background-color: #afafaf;
      }
    }
  }

  input[type="radio"] {
    + a label {
      &::before {
        top: 2px;
        border-radius: 50%;
      }
    }
  }
}

.filter-fieldset--chars {
  .filter-fieldset__item {
    &.disabled {
      display: none;
    }
  }
}

.filter-fieldset__title {
  margin: 0 0 17px;
  font-size: 25px;
  font-weight: 300;
  color: $color-primary-blue;
}

.filter-fieldset__list {
  @include reset-list;

  font-size: 15px;
  line-height: 1.2;
  color: #939393;
}

.filter-fieldset__item {
  position: relative;
  margin-top: 15px;

  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &--box {
    .filter-fieldset__toggle {
      top: auto;
      bottom: 12px;
    }
  }

  a {
    display: inline-block;
    margin-right: 20px;
  }

  &.visible {
    .filter-fieldset__sublist {
      display: block;
    }

    .filter-fieldset__toggle {
      transform: rotate(180deg);
    }

    .filter-fieldset__range-box {
      display: block;
      padding-top: 27px;

      &:not(.default) + .filter-fieldset__reset {
        //display: block;
      }
    }
  }
}

.filter-fieldset__sublist {
  @include reset-list;

  padding-left: 25px;
  padding-top: 7px;
  display: none;

  &--loose {
    padding: 0 0 10px;
    line-height: 30px;
    //word-break: break-all;

    input[type="checkbox"] + a {
      display: inline;
      margin: 0 5px 0 0;

      label {
        display: inline;
        padding: 0;

        span {
          white-space: normal;
          text-decoration: underline;
          font-size: 13px;
          line-height: 30px;
        }

        svg {
          opacity: 0;
          fill: #8a8a8a;
          margin-left: 0.4em;
        }

        &::before { content: none; }
      }

      &:first-of-type {
        span {
          margin-left: -0.4em;
        }

        svg {
          display: none;
        }
      }
    }

    input[type="checkbox"]:checked + a {
      label {
        font-weight: 300;
        background-color: #e3e3e3;
        white-space: nowrap;

        span {
          text-decoration: none;
        }

        svg {
          opacity: 1;
        }
      }

      &:first-of-type {
        span {
          margin-left: 0;
        }

        svg {
          display: inline;
        }
      }
    }
  }
}

.filter-fieldset__subitem {
  position: relative;

  &:not(:first-of-type) {
    margin-top: 10px;
  }
}

.filter-fieldset__toggle {
  @include reset-button;

  position: absolute;
  right: 1px;
  top: 0;
  font-size: 15px;
  line-height: 1.2;

  svg {
    fill: #939393;
  }
}

.filter-fieldset__range-box {
  display: none;
}

.filter-fieldset__reset-wrp {
  position: relative;
  width: 100%;
}

.filter-fieldset__reset {
  @include reset-button;

  position: absolute;
  top: 0;
  left: 0;
  display: none;
  padding: 3px 0;
  font-size: 11px;
  text-decoration: underline;
  color: $color-primary-blue;

  &:hover {
    color: #939393;
  }
}

@include media('tablet-s') {
  .filter-fieldset {
    padding: 19px 0 2px;
    border: none;

    input[type="checkbox"] {
      + a label {
        padding: 0 17px 10px;
        padding-left: 42px;

        &::before {
          position: absolute;
          top: 4px;
          left: 18px;
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 9px;
          height: 9px;
          border: none;
        }
      }

      &:checked + a label {
        font-weight: 300;

        &::before {
          top: 0;
          width: auto;
          height: auto;
          box-shadow: none;
          background-color: transparent;
          content: '\f00c';
          display: inline-block;
          margin-right: 20px;
          font-family: 'Font Awesome 5 Pro', Helvetica, sans-serif;
          font-weight: 900;
          color: $color-primary-blue;
        }
      }
    }

    &:not(:last-of-type) {
      margin-bottom: 0;
    }

    input[type="radio"] {
      + a label {
        margin-left: 18px;
        &::before {
          top: 4px;
        }
      }
    }
  }

  .filter-fieldset__title {
    margin-bottom: 0;
    padding: 0 17px;
    font-size: 20px;
    line-height: 1;
  }

  .filter-fieldset__list {
    font-size: 18px;
  }

  .filter-fieldset__item {
    padding: 0;
    margin-top: 0;

    &:not(&--expand):not(&--box) {
      margin-top: 13px;
      border-bottom: 1px solid #d3d3d3;
    }

    &--expand {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      background-color: #f3f4f9;
      padding: 0;

      &:first-of-type {
        margin-top: 13px;
      }

      > input[type="checkbox"],
      > button {

        + a {
          order: -1;
          max-width: 300px;
          margin-right: 6.5px;

          label {
            padding: 8px 0 6px 18px;

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

        &:checked + a label {
          &::before {
            display: none;
          }
        }
      }
    }

    &--box {
      display: flex;
      flex-wrap: wrap;
      background-color: #f3f4f9;

      &:first-of-type {
        margin-top: 13px;
      }

      .filter-fieldset__toggle {
        margin-top: 6px;
      }

      > a {
        order: -1;
        padding: 8px 8px 6px 18px;
        margin-right: 0;

        span {
          display: none;
        }
      }
    }
  }

  .filter-fieldset__toggle {
    position: static;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    padding: 11px 0;

    svg {
      vertical-align: middle;
    }
  }

  .filter-fieldset__sublist {
    width: 100%;
    padding: 4px 0 0;
    background: #fff;

    &--loose {
      order: 1;
      padding: 10px 20px;
      line-height: 20px;

      input[type="checkbox"] {
        + a {
          font-size: 13px;

          label {
            padding-left: 0;
            padding-bottom: 0;
            padding-right: 0;
            font-size: 13px;
            line-height: 1;

            span {
              line-height: inherit;
            }

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

        &:checked + a {
          label {
            &::before {
              display: none;
            }
          }
        }
      }
    }
  }

  .filter-fieldset__subitem {
    padding: 14px 14px;
    line-height: 1;

    input[type="checkbox"] {
      + a label {
        padding: 0;
        padding-left: 41px;

        &::before {
          left: 18px;
        }
      }
    }

    &:not(:first-of-type) {
      margin-top: 0;
    }

    &:not(:last-of-type) {
      padding: 14px 14px 13px;
      border-bottom: 1px solid #d3d3d3;
    }
  }

  .filter-fieldset__range-box {
    width: 100%;
    padding: 27px 15px;
    background-color: #fff;
  }

  .filter-fieldset__reset {
    top: auto;
    bottom: 0;
    text-align: left;
    padding: 8px 14px;
  }
}