/**

 * @file

 * Pagination / "See more" Button Component

 * SMIP EC Knowledge Hub module.

 */


/* ==========================================================================
   Pagination / "See more" Button
   ========================================================================== */
.ecl-results-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
}

.ecl-button--see-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 8px 24px !important;
  box-sizing: border-box !important;
  border-radius: var(--Radius-s, 4px) !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  background-color: var(--ec-color-search-button, #FFBE5C) !important;
  border: none !important;
  color: var(--ec-color-text, #00002E) !important;
  font-family: var(--Font-family-inter, 'Inter', sans-serif), Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease, transform 0.1s ease !important;
}

.ecl-button--see-more:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  text-decoration: none !important;
}

.ecl-button--see-more:active {
  transform: translateY(1px) !important;
}

.ecl-button__icon-down {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--ec-color-text, #00002E) !important;
  flex-shrink: 0 !important;
}

.ecl-button__spinner {
  display: none !important;
  width: 16px !important;
  height: 16px !important;
  stroke: var(--ec-color-text, #00002E) !important;
  flex-shrink: 0 !important;
  animation: eclSeeMoreSpin 0.8s linear infinite !important;
}

@keyframes eclSeeMoreSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ecl-button--see-more.is-loading,
.ecl-button--see-more:disabled,
.ecl-button--see-more[aria-disabled="true"] {
  background: var(--Surface-surface-filter-header, #EDEDF0) !important;
  background-color: var(--Surface-surface-filter-header, #EDEDF0) !important;
  color: var(--ec-color-disable-text, #696984) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.ecl-button--see-more.is-loading:hover,
.ecl-button--see-more:disabled:hover,
.ecl-button--see-more[aria-disabled="true"]:hover {
  background: var(--Surface-surface-filter-header, #EDEDF0) !important;
  opacity: 1 !important;
  transform: none !important;
  text-decoration: none !important;
}

.ecl-button--see-more.is-loading .ecl-button__spinner {
  display: inline-block !important;
  stroke: var(--ec-color-disable-text, #696984) !important;
}

.ecl-button--see-more.is-loading .ecl-button__icon-down {
  display: none !important;
}

.ecl-button--see-more.is-loading .ecl-button__see-more-text {
  color: var(--ec-color-disable-text, #696984) !important;
}