/**
 * ============================================================================
 * CONTENT LOADER - "LOAD MORE" BUTTON STYLING
 * ============================================================================
 * Styles for the dynamic article loading component.
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN CONTAINER */
/* ========================================================================== */
.content-loader {
  width: 100%; /* Full width */
  padding: 30px 0; /* Vertical spacing */
  display: flex; /* Flexbox */
  flex-direction: column; /* Stack vertically */
  justify-content: center; /* Center content */
  align-items: center; /* Center horizontally */
  gap: 20px; /* Space between elements */
}

/* ARTICLES CONTAINER */
.content-loader__articles {
  width: 100%; /* Full width */
}

/* Dynamically loaded articles list */
.content-loader__articles .recent-highlights__list {
  list-style: none; /* Remove bullets */
  display: flex; /* Flexbox */
  flex-direction: column; /* Stack vertically */
  gap: 12px; /* Space between articles */
  margin: 0; /* No margin */
  padding: 0; /* No padding */
}

/* ========================================================================== */
/* LOAD MORE BUTTON */
/* ========================================================================== */
.content-loader__btn {
  display: flex; /* Flexbox for icon + text */
  align-items: center; /* Vertically center */
  gap: 10px; /* Space between icon and text */
  background-color: #211d25; /* Dark background */
  color: #ffffff; /* White text */
  border: none; /* No border */
  padding: 14px 32px; /* Button padding */
  font-size: 15px; /* Text size */
  font-weight: 500; /* Medium weight */
  cursor: pointer; /* Pointer cursor */
}

/* BUTTON DISABLED STATE */
.content-loader__btn:disabled {
  opacity: 0.6; /* Dimmed appearance */
  cursor: not-allowed; /* Not-allowed cursor */
}

/* BUTTON LOADING STATE */
.content-loader__btn--loading {
  opacity: 0.8; /* Slightly dimmed */
}

/* BUTTON ICON */
.content-loader__icon {
  width: 20px; /* Icon width */
  height: 20px; /* Icon height */
  filter: brightness(0) invert(1); /* Convert to white */
}

/* ========================================================================== */
/* MESSAGE - END OF CONTENT NOTIFICATION */
/* ========================================================================== */
.content-loader__message {
  text-align: center; /* Center text */
  color: rgba(255, 255, 255, 0.8); /* White text */
  font-size: 16px; /* Readable size */
  font-weight: 400; /* Regular weight */
  line-height: 1.6; /* Line spacing */
  padding: 20px; /* Internal spacing */
  max-width: 600px; /* Limit width */
}