.PR {
  --PR-paginationButtonWidth: calc(
    var(--gap-s) * 2 + var(--Icon-size) + var(--gap-m)
  );
  --PR-paginationWidth: calc(var(--PR-paginationButtonWidth) * 3 + 220px);

  position: relative;
}

.PR-filters {
  align-items: center;
  background: var(--color-gray1);
  border-color: var(--color-gray2);
  border-style: solid;
  border-width: 1px 0;
  display: flex;
  justify-content: flex-start;
  margin: 0 calc(0px - var(--gap-l));
  order: -1;
  overflow: auto;
  padding: 0 calc(var(--gap-l) / 2);
  position: relative;
  width: calc(var(--gap-l) * 2 + 100%);

  form {
    display: flex;
    flex-wrap: wrap;
    margin: 0;

    > * {
      flex-grow: 1;
    }
  }
}

.PR-filters .ComboInput,
.PR-pagination .ComboInput {
  --Input-focusBackground: var(--color-gray2);
  --ComboInput-listPadding: calc(var(--gap-l) / 2);

  min-height: calc(var(--ComboInput-listPadding) * 2 + var(--Text-height));
  width: auto;

  &::before {
    display: none;
  }

  &-icon::after {
    bottom: calc(var(--ComboInput-listPadding) - 2px);
    right: var(--ComboInput-listPadding);
  }

  &,
  &:focus {
    padding: var(--ComboInput-listPadding);
    padding-right: calc(
      var(--gap-xs) + var(--Icon-size) + var(--ComboInput-listPadding)
    );
  }

  &:hover,
  &:focus {
    background: var(--color-gray2);
  }

  &-filter {
    background: none;
  }
}

.PR-pagination {
  --PR-paginationPadding: calc(var(--gap-l) / 2);

  min-height: calc(var(--PR-paginationPadding) * 2 + var(--Text-height));
  padding: 0 calc(var(--gap-l) / 2);
  position: absolute;
  right: calc(0px - var(--gap-l));
  top: calc(0px - 2 * (var(--Text-height)));
  width: auto;
}

@media (@mq-l) {
  .PR-filters .ComboInput,
  .PR-pagination .ComboInput {
    &-icon::after {
      bottom: var(--ComboInput-listPadding);
    }
  }
}
