/* ---- Comments pagination -----*/

.wp-block-comments-pagination {
  align-items: center;
  border-radius: 0.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0.5em auto 1em auto;
  padding: 0.25em 1em;
  text-align: center;
  width: 100%;

  a {
    font-weight: bold;
  }

  > .wp-block-comments-pagination-next,
  > .wp-block-comments-pagination-numbers,
  > .wp-block-comments-pagination-previous {
    margin: 0;
  }

  > .wp-block-comments-pagination-next,
  > .wp-block-comments-pagination-previous {
    border-bottom-color: transparent;
  }
}

.wp-block-comments-pagination-numbers {
  display: flex;
}

.page-numbers {
  min-width: 44px;
  min-height: 44px;
}

.page-numbers,
a.page-numbers {
  padding: 8px;
}

.wp-block-comments-pagination {
  .page-numbers,
  .page-numbers:hover,
  .page-numbers:focus,
  .page-numbers:active {
    border-bottom-color: transparent;
  }
}

@media (min-width: 768px) {
  .wp-block-comments-pagination {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Contrast Colors */
.wp-block-comments-pagination {
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    background-color: var(--black-12pcnt);

    a {
      color: var(--almost-black) !important;
    }

    a:hover,
    a:focus,
    a:active {
      border-bottom-color: var(--black-75pcnt);
    }
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    background-color: var(--white-12pcnt);

    a {
      color: var(--almost-white) !important;
    }

    a:hover,
    a:focus,
    a:active {
      border-bottom-color: var(--white-75pcnt);
    }
  }

  a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--contrast);
  }
}
