.pagination {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 300px;
  gap: 24px;
}
.pagination__show-all {
  border-color: #f6f6f6 !important;
  background-color: #f6f6f6 !important;
  max-width: none;
  width: 100%;
}
.pagination__show-all:before {
  display: none;
}
.pagination__show-all:hover {
  color: #ff7100 !important;
}
.pagination__controls {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-inline: 15px;
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pagination__list li {
  flex: 0 0 40px;
}
.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  transition: background-color 0.3s cubic-bezier(0.3, 0.1, 0.26, 1);
}
.pagination__arrow:disabled {
  pointer-events: none;
  display: none;
}
.pagination__arrow svg {
  width: 13px;
  height: 13px;
}
@media (min-width: 768px) {
  .pagination__arrow:hover {
    background-color: #f6f6f6;
  }
  .pagination__arrow:hover svg {
    color: #ff7100;
  }
}
.pagination__arrow.prev svg {
  transform: rotate(-135deg);
}
.pagination__arrow.next svg {
  transform: rotate(45deg);
}
.pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  transition: background-color 0.3s cubic-bezier(0.3, 0.1, 0.26, 1), color 0.3s cubic-bezier(0.3, 0.1, 0.26, 1);
}
.pagination__button:disabled {
  pointer-events: none;
}
.pagination__button.active {
  background-color: #ff7100;
  color: #fff;
}
.pagination__button.active:hover {
  background-color: #ff7100;
  color: #fff;
}
@media (min-width: 768px) {
  .pagination__button:hover {
    background-color: #f6f6f6;
    color: #ff7100;
  }
}