.filter-panel {
  $block: #{&};

  inline-size: 100%;
  max-inline-size: 28rem;
  border: 0.1rem solid $color-neutral-4;

  @media (prefers-reduced-motion: no-preference) {
    transition: transform 0.15s;
  }

  &--slider {
    @include media-down(tablet-l) {
      @include position(absolute, 0, auto, auto, 0);

      /* stylelint-disable-next-line @morev/bem/no-block-properties -- Exception */
      z-index: 2000;
      background-color: $color-neutral-1;
      box-shadow: get-shadow(medium);
      transform: translateX(-200%);
    }
  }

  &--open {
    transform: translateX(0%);
  }

  &__header,
  &__body {
    padding: $whitespace-5;
  }

  &__header {
    @include flex(row, nowrap, $whitespace-5, center, space-between);

    border-block-end: 0.1rem solid $color-neutral-4;
  }

  &__heading {
    font-weight: $font-weight-semi-bold;
  }

  &__button-group {
    @include flex(row, nowrap, $whitespace-6, center);
  }

  &__reset-button {
    @include size(3.25rem, 3.25rem);
  }

  &__close-button {
    display: none;

    @include media-down(tablet-l) {
      display: block;
    }
  }
}