//
//  DIALTONE
//  COMPONENTS: Pagination
//
//  These are the styles for Pagination component.
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • PREV & NEXT BUTTONS
//  • SEPARATOR
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-pagination {
  display: flex;
  flex-direction: row;
  grid-gap: var(--dt-space-300);
  align-items: center;
}

//  ============================================================================
//  $   PREV & NEXT BUTTONS
//  ----------------------------------------------------------------------------
.d-pagination__button {
  padding-right: var(--dt-space-400);
  padding-left: var(--dt-space-400);

  &:disabled {
    color: var(--dt-color-foreground-secondary-inverted);
    background-color: var(--dt-color-neutral-transparent);
  }
}

//  ============================================================================
//  $   SEPARATOR
//  ----------------------------------------------------------------------------
.d-pagination__separator {
  align-self: flex-end;
}

.d-pagination__separator-icon {
  width: var(--dt-size-550);
  color: var(--dt-color-foreground-tertiary);
  text-align: center;
}