// Name:            Pagination
// Description:     Navigate throgh list of items
//
// Component:       `c-pagination`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

$pagination-number-radius: 20px;
$pagination-icon-radius: 50%;
$pagination-link-size: 1.5rem;

// ========================================================================

.c-pagination {

  // Custom properties
  // ========================================================================

  --pagination-item-color: var(--link-color-dark);
  --pagination-item-bg: transparent;
  --pagination-item-border-color: var(--icon-color);

  // ========================================================================

  &__item {
    height: $pagination-link-size;
    border-radius: $pagination-number-radius;
    background-color: var(--pagination-item-bg);
    color: var(--pagination-item-color);    
    transition: $global-interactive-transition;

    &:hover {
      --pagination-item-bg: var(--background-color-light);
    }

    &.is-active {
      --pagination-item-bg: var(--item-bg-inverse);
      --pagination-item-color: var(--body-color-inverse);
    }
    
    &--rounded {
      width: $pagination-link-size;
      border: 1px solid var(--pagination-item-border-color);
      
      &:hover {
        --pagination-item-bg: transparent;
        --pagination-item-border-color: #{$ui-04};
        --pagination-item-color: #{$ui-04};
      }
    }
  }

}