/* ------------------------------------------------------------
*  Data Portal
*
*  This Stylesheet is built with rem values assuming a 16px base font size.
*  8px        8 / 16 = 0.5rem
*  20px      20 / 16 = 1.25rem
*  768px    768 / 16 = 48rem
*
*  UI icons are SVGs, base64 converted for use as background/mask images.
*
*  1.0 - Variables
*  2.0 - Layout
*  3.0 - Header
*    3.1 - Search
*      3.1.1 - Dropdown
*      3.1.2 - Dropdown Options (Radio/Checkboxes)
*    3.2 - Advanced Search
  *    3.2.1 - Choices (JS dropdown library)
*  4.0 - Results
*    4.1 - Card
*    4.2 - Pagination
------------------------------------------------------------ */

/* ------------------------------------------------------------
1.0 - Variables
------------------------------------------------------------ */

.data-portal {
  --dp-c-dark: 0, 14, 38;
  --dp-c-light: 255, 255, 255;
  --dp-c-primary: 70, 127, 247;
  --dp-c-border: 219, 222, 227;
  --svg-caret: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTUuNEw2IDkuNEw3LjQgOEwxMiAxMi42TDE2LjYgOEwxOCA5LjRMMTIgMTUuNFoiIC8+PC9zdmc+');
  --svg-checkmark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNOC41IDE0LjJMNC41IDEwLjJMNS45IDguNzk5OTlMOC41IDExLjRMMTQuMSA1Ljc5OTk5TDE1LjUgNy4xOTk5OUw4LjUgMTQuMloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');
  --svg-filter: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgMThWMTZIMTRWMThIMTBaTTYgMTNWMTFIMThWMTNINlpNMyA4VjZIMjFWOEgzWiIgZmlsbD0iI0RCREVFMyIvPjwvc3ZnPg==');
  --svg-reset: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgOEMxOC41OTcgNS4wNCAxNS41MzcgMyAxMiAzQzEwLjgxODEgMyA5LjY0Nzc4IDMuMjMyNzkgOC41NTU4NSAzLjY4NTA4QzcuNDYzOTIgNC4xMzczOCA2LjQ3MTc3IDQuODAwMzEgNS42MzYwNCA1LjYzNjA0QzQuODAwMzEgNi40NzE3NyA0LjEzNzM4IDcuNDYzOTIgMy42ODUwOCA4LjU1NTg1QzMuMjMyNzkgOS42NDc3OCAzIDEwLjgxODEgMyAxMkMzIDEzLjE4MTkgMy4yMzI3OSAxNC4zNTIyIDMuNjg1MDggMTUuNDQ0MkM0LjEzNzM4IDE2LjUzNjEgNC44MDAzMSAxNy41MjgyIDUuNjM2MDQgMTguMzY0QzYuNDcxNzcgMTkuMTk5NyA3LjQ2MzkyIDE5Ljg2MjYgOC41NTU4NSAyMC4zMTQ5QzkuNjQ3NzggMjAuNzY3MiAxMC44MTgxIDIxIDEyIDIxQzE0LjM4NjkgMjEgMTYuNjc2MSAyMC4wNTE4IDE4LjM2NCAxOC4zNjRDMjAuMDUxOCAxNi42NzYxIDIxIDE0LjM4NjkgMjEgMTJNMjEgM1Y5SDE1IiBmaWxsPSJub25lIiBzdHJva2U9IiM0NjdGRjciIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==');
  font-family: 'Poppins', sans-serif;
  color: rgb(var(--dp-c-light));
}

/* ------------------------------------------------------------
2.0 - Layout
------------------------------------------------------------ */

.data-portal {}

.data-portal__container {
  width: 77.5rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.data-portal__main {
  padding: 5rem 0;
  background: rgb(var(--dp-c-light));
  color: rgb(var(--dp-c-dark));
}

/* ------------------------------------------------------------
3.0 - Header
------------------------------------------------------------ */

.data-portal__head {
  margin: 3rem 0;
}

@media (min-width: 30rem) {
  .data-portal__head {
    margin: 5rem 0;
  }
}

.data-portal__header {
  margin-bottom: 3rem;
  width: 47rem;
  max-width: 100%;
}

@media (min-width: 30rem) {
  .data-portal__header {
    margin-bottom: 6.25rem;
  }
}

.data-portal__header-title {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 400;
}

@media (min-width: 30rem) {
  .data-portal__header-title {
    font-size: 4rem;
  }
}

.data-portal__header-description {
  margin: 2rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: rgb(var(--dp-c-light), 0.8);
}

@media (min-width: 30rem) {
  .data-portal__header-description {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------
3.1 - Search
------------------------------------------------------------ */

.data-portal-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}

.data-portal-search__reset {
  order: 1;
  display: grid;
  grid-template-columns: 1.5rem auto;
  gap: 0.5rem;
  margin: 0;
  padding: 1.25rem 0;
  border: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgb(var(--dp-c-light));
}

.data-portal-search__reset:focus,
.data-portal-search__reset:hover {
  background: 0;
  color: rgb(var(--dp-c-light));
  text-decoration: underline;
}

.data-portal-search__reset::before {
  content: '';
  position: relative;
  top: 0.125rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  mask: center / cover no-repeat var(--svg-reset);
  -webkit-mask: center / cover no-repeat var(--svg-reset);
  background: rgb(var(--dp-c-primary));
  transition: transform 0.25s ease-in-out;
}

.data-portal-search__reset:focus::before,
.data-portal-search__reset:hover::before {
  transform: rotate(90deg);
}

.data-portal-search__bar {
  flex: 0 0 100%;
  width: 100%;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  background: rgb(var(--dp-c-light));
  color: rgb(var(--dp-c-dark));
}

@media (min-width: 60rem) {
  .data-portal-search__bar {
    display: flex;
  }
}

.data-portal-search__text-input[type="text"] {
  flex: 1 1 auto;
  padding: 1.5rem;
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  font: inherit;
  color: inherit;
}

@media (min-width: 60rem) {
  .data-portal-search__text-input[type="text"] {
    border-radius: 0.5rem 0 0 0.5rem;
  }
}

.data-portal-search__text-input::placeholder {
  color: rgba(var(--dp-c-dark), 0.2);
}

/* ------------------------------------------------------------
3.1.1 - Dropdown
------------------------------------------------------------ */

.data-portal-search__dropdown {
  position: relative;
  margin-top: -1px;
  border: 1px solid rgb(var(--dp-c-border));
  border-left-width: 0;
  border-right-width: 0;
  background: rgb(var(--dp-c-light));
  color: rgb(var(--dp-c-dark));
}

@media (min-width: 60rem) {
  .data-portal-search__dropdown {
    flex: 0 0 15rem;
    margin-top: 0;
    margin-left: -1px;
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: 1px;
    border-right-width: 1px;
  }
}

.data-portal-search__dropdown[disabled] {
  pointer-events: none;
  user-select: none;
  background: rgba(var(--dp-c-dark), 0.05);
  color: rgba(var(--dp-c-dark), 0.2);
}

@media (max-width: 60rem) {
  .data-portal-search__dropdown[open]+.data-portal-search__dropdown {
    pointer-events: none;
    user-select: none;
  }
}

.data-portal-search__dropdown-label {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto 1.5rem;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem 1.25rem;
  cursor: pointer;
}

.data-portal-search__dropdown-label::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(var(--dp-c-primary), 0.2);
  opacity: 0;
}

.data-portal-search__dropdown-label:focus-visible,
.data-portal-search__dropdown:hover {
  z-index: 1;
  border-color: rgb(var(--dp-c-primary));
}

.data-portal-search__dropdown-label:focus-visible::before,
.data-portal-search__dropdown:hover .data-portal-search__dropdown-label::before {
  opacity: 1;
}

.data-portal-search__dropdown-label::marker,
.data-portal-search__dropdown-label::-webkit-details-marker {
  display: none;
}

.data-portal-search__dropdown-label-text {
  margin: 0;
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-portal-search__dropdown-label::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  background: currentColor;
  mask: center / cover no-repeat var(--svg-caret);
  -webkit-mask: center / cover no-repeat var(--svg-caret);
  transition: transform 0.25s ease-in-out;
}

.data-portal-search__dropdown[open] .data-portal-search__dropdown-label::after {
  transform: rotate(-180deg);
}

.data-portal-search__dropdown-content {
  position: absolute;
  z-index: 1;
  top: 100%;
  margin-top: 0.5rem;
  right: 0;
  width: 30rem;
  max-width: 100%;
  border: 1px solid rgb(var(--dp-c-border));
  border-radius: 0.5rem;
  background: rgb(var(--dp-c-light));
}

@media (min-width: 35rem) {
  .data-portal-search__dropdown-content {
    max-width: none;
  }
}

@media (min-width: 60rem) {
  .data-portal-search__dropdown:first-of-type .data-portal-search__dropdown-content {
    left: 0;
    right: auto;
  }
}

.data-portal-search__dropdown-header {
  display: flex;
  align-items: baseline;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgb(var(--dp-c-border));
}

.data-portal-search__dropdown-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  margin-right: auto;
}

.data-portal-search__dropdown-clear {
  padding: 0;
  border: 0;
  line-height: inherit;
  color: inherit;
}

.data-portal-search__dropdown-clear:focus,
.data-portal-search__dropdown-clear:hover {
  background: 0;
  color: rgb(var(--dp-c-primary));
}

/* ------------------------------------------------------------
3.1.2 - Dropdown Options (Radio/Checkboxes)
------------------------------------------------------------ */

.data-portal-search__dropdown-options {
  padding: 1.25rem;
}

.data-portal-search__option {
  display: grid;
  grid-template-columns: 2rem auto;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

.data-portal-search__option-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.data-portal-search__option-icon {
  width: 1.875rem;
  height: 1.875rem;
  margin-top: -0.3125rem;
  border-radius: 50%;
}

.data-portal-search__option-state:checked~.data-portal-search__option-icon {
  background: rgb(var(--dp-c-primary));
  box-shadow: 0 0 0 0.125rem rgb(var(--dp-c-primary));
}

.data-portal-search__option-icon-mark {}

.data-portal-search__option-state:checked~.data-portal-search__option-icon .data-portal-search__option-icon-mark {
  filter: brightness(0) invert(1);
}

.data-portal-search__option-checkmark {
  width: 1.25rem;
  height: 1.25rem;
  border: 0.125rem solid rgb(var(--dp-c-border));
  border-radius: 0.125rem;
}

.data-portal-search__option-checkmark::before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.125rem;
  margin-left: -0.125rem;
  mask: center / cover no-repeat var(--svg-checkmark);
  -webkit-mask: center / cover no-repeat var(--svg-checkmark);
  background: rgb(var(--dp-c-border));
  transform: scale(0);
  transition: transform 0.25s ease-in-out;
}

.data-portal-search__option-state:checked~.data-portal-search__option-checkmark {
  border-width: 0;
  background: rgb(var(--dp-c-primary));
}

.data-portal-search__option-state:checked~.data-portal-search__option-checkmark::before {
  margin: 0;
  transform: none;
  background: rgb(var(--dp-c-light));
}

.data-portal-search__option-label {
  font-size: 1.25rem;
  color: rgb(var(--dp-c-dark));
}

.data-portal-search__option:hover .data-portal-search__option-label,
.data-portal-search__option-state:focus-visible~.data-portal-search__option-label,
.data-portal-search__option-state:checked~.data-portal-search__option-label {
  color: rgb(var(--dp-c-primary));
}

.data-portal-search__submit {
  flex: 0 0 auto;
  margin: 0.5rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 0.25rem;
  font-size: inherit;
  line-height: inherit;
  background: rgb(var(--dp-c-primary));
  color: rgb(var(--dp-c-light));
}

.data-portal-search__submit:focus,
.data-portal-search__submit:focus-visible,
.data-portal-search__submit:hover {
  background: rgb(var(--dp-c-dark));
}

/* ------------------------------------------------------------
3.2 - Advanced Search
------------------------------------------------------------ */

.data-portal-search__advanced {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
  width: 100%;
  margin-right: auto;
}

@media (min-width: 30rem) {
  .data-portal-search__advanced {
    width: auto;
  }
}

.data-portal-search__advanced-toggle-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.data-portal-search__advanced-toggle {
  display: inline-grid;
  grid-template-columns: auto 1.5rem;
  gap: 0.5rem;
  margin: 0;
  padding: 1.25rem 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgba(var(--dp-c-light), 0.8);
  cursor: pointer;
}

.data-portal-search__advanced-toggle:hover {
  color: rgb(var(--dp-c-primary));
}

.data-portal-search__advanced-toggle-state:focus-visible ~ .data-portal-search__advanced-toggle,
.data-portal-search__advanced-toggle-state:checked ~ .data-portal-search__advanced-toggle {
  color: rgb(var(--dp-c-primary));
  text-decoration: underline;
}

.data-portal-search__advanced-toggle::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  mask: center / cover no-repeat var(--svg-filter);
  -webkit-mask: center / cover no-repeat var(--svg-filter);
  background: currentColor;
}

.data-portal-search__advanced-content {
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0 2rem;
  flex: 1 1 100%;
}

@media (min-width: 30rem) {
  .data-portal-search__advanced-content {
    align-items: flex-start;
  }
}

@media (min-width: 48rem) {
  .data-portal-search__advanced-content {
    flex-direction: row;
  }
}

@media (min-width: 60rem) {
  .data-portal-search__advanced-content {
    flex: 0 1 auto;
  }
}

.data-portal-search__advanced-toggle-state:checked ~ .data-portal-search__advanced-content {
  display: flex;
}

/* ------------------------------------------------------------
3.2.1 - Choices
------------------------------------------------------------ */

.choices[data-type*=select-one] {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto 1.5rem;
  gap: 0.5rem;
  margin-top: -1rem;
  margin-bottom: 0;
  padding: 1.25rem 0;
  font-size: 1.25rem;
  line-height: 1.2;
  cursor: pointer;
}

@media (min-width: 60rem) {
  .choices[data-type*=select-one] {
    margin-top: 0;
  }
}

.choices[data-type*=select-one].is-open {
  z-index: 1;
}

.choices[data-type*=select-one]::after {
  content: '';
  position: relative;
  top: 0.125rem;
  right: 0;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  border: 0;
  background: currentColor;
  mask: center / cover no-repeat var(--svg-caret);
  -webkit-mask: center / cover no-repeat var(--svg-caret);
  transition: transform 0.25s ease-in-out;
}

.choices[data-type*=select-one].is-focused {
  text-decoration: underline;
}

.choices[data-type*=select-one].is-open:after {
  margin-top: 0;
  transform: rotate(-180deg);
}

.choices[data-type*=select-one] .choices__inner {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: 0;
  font-size: inherit;
  line-height: 1.2;
}

.choices[data-type*=select-one] .choices__input {
  padding: 0;
  border: 0;
  background: 0;
  font-size: inherit;
  transition: none;
}

.choices[data-type*=select-one] .choices__list--single {
  display: block;
  padding: 0;
  font-size: inherit;
}

.choices[data-type*=select-one] .choices__item {
  opacity: 1;
}

.choices[data-type*=select-one] .choices__list--dropdown {
  width: 20rem;
  max-width: calc(100vw - 2.5rem);
  padding: 1rem 1rem 0;
  border: 1px solid rgb(var(--dp-c-border));
  border-radius: 0.25rem;
  background: rgb(var(--dp-c-dark));
  word-break: normal;
}

.choices[data-type*=select-one]:nth-child(2) .choices__list--dropdown {
  width: 30rem;
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__list {
  max-height: 16rem;
  padding: 0.5rem 0 1.5rem;
  mask: linear-gradient(#0000, #000), linear-gradient(#000, #000), linear-gradient(#000, #0000);
  mask-size: 100% 1rem, 100% calc(100% - 3rem), 100% 2rem;
  mask-position: top, center, bottom;
  mask-repeat: no-repeat;
  -webkit-mask: linear-gradient(#0000, #000), linear-gradient(#000, #000), linear-gradient(#000, #0000);
  -webkit-mask-size: 100% 1rem, 100% calc(100% - 3rem), 100% 2rem;
  -webkit-mask-position: left top, left top 1rem, left bottom;
  -webkit-mask-repeat: no-repeat;
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__input {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(var(--dp-c-border), 0.5);
  border-radius: 0.25rem;
  color: rgb(var(--dp-c-light));
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__input::placeholder {
  color: rgba(var(--dp-c-border), 0.5);
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item {
  padding: 0.5rem 0;
  font-size: inherit;
  color: rgb(var(--dp-c-border));
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item.is-highlighted,
.choices[data-type*=select-one] .choices__list--dropdown .choices__item.is-selected {
  background: 0;
  color: rgb(var(--dp-c-primary));
}

.choices[data-type*=select-one] .choices__list--dropdown .choices__item.is-highlighted:not(.is-selected) {
  color: rgb(var(--dp-c-border));
}



/* ------------------------------------------------------------
4.0 - Results
------------------------------------------------------------ */

.data-portal__query {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  line-height: 1.4;
}

.data-portal__message {
  margin: 2rem 0 0;
  font-size: 2rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------
4.1 - Card
------------------------------------------------------------ */

.data-portal-card {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 0.125rem solid rgb(var(--dp-c-border));
  border-radius: 0.75rem;
  font-size: 1.25;
  line-height: 1.4;
}

@media (min-width: 30rem) {
  .data-portal-card {
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

.data-portal-card+.data-portal-card {
  margin-top: 2rem;
}

.data-portal-card__icon {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  padding: 0.3125rem;
}

.data-portal-card:focus-within .data-portal-card__icon,
.data-portal-card:hover .data-portal-card__icon {
  background: rgb(var(--dp-c-primary));
}

.data-portal-card__icon-mark {
  display: block;
}

.data-portal-card:focus-within .data-portal-card__icon-mark,
.data-portal-card:hover .data-portal-card__icon-mark {
  filter: brightness(0) invert(1);
}

.data-portal-card__content {}

.data-portal-card__title {
  margin: 0;
  font-size: 1.5rem;
}

.data-portal-card__link {
  text-decoration: none;
  color: inherit;
}

.data-portal-card__link:focus-visible,
.data-portal-card__link:hover {
  color: rgb(var(--dp-c-primary));
}

.data-portal-card__link::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
}

.data-portal-card__description {
  margin: 1rem 0 0;
  font: inherit;
  color: rgba(var(--dp-c-dark), 0.8);
}

.data-portal-card__source {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-style: italic;
  color: rgba(var(--dp-c-dark), 0.8);
}

.data-portal-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.25rem;
}

.data-portal-card__cta {
  display: inline-block;
  margin: 0;
  margin-right: auto;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  background: rgb(var(--dp-c-dark));
  color: rgb(var(--dp-c-light));
}


.data-portal-card:focus-within .data-portal-card__cta,
.data-portal-card:hover .data-portal-card__cta {
  background: rgb(var(--dp-c-primary));
}

.data-portal-card__type {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
}

.data-portal-card__type-label {
  margin: 0;
}

.data-portal-card__type-icon {
  width: 3.125rem;
  height: 3.125rem;
}

/* ------------------------------------------------------------
4.2 - Pagination
------------------------------------------------------------ */

.data-portal .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.data-portal .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-top: 0.0625rem;
  padding-left: 0.0625rem;
  border: 0.125rem solid rgb(var(--dp-c-border));
  border-radius: 0.625rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: inherit;
}

.data-portal .page-numbers:not(.current):focus,
.data-portal .page-numbers:not(.current):hover {
  font-weight: 500;
  border-color: rgb(var(--dp-c-dark));
  background: rgb(var(--dp-c-dark));
  color: rgb(var(--dp-c-light));
}

.data-portal .page-numbers.current {
  font-weight: 500;
  border-color: rgb(var(--dp-c-primary));
  background: rgb(var(--dp-c-primary));
  color: rgb(var(--dp-c-light));
}

.data-portal .page-numbers.prev,
.data-portal .page-numbers.next {
  padding-top: 0;
}

.data-portal .page-numbers.prev::before,
.data-portal .page-numbers.next::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 0.5rem solid transparent;
  border-left-color: currentColor;
  border-right-width: 0;
}

.data-portal .page-numbers.prev::before {
  transform: scaleX(-1);
}