/// ----------------------------------------------------------------------

/// Pagination

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'colours';
@use 'borders';
@use 'spacing';
@use 'corners';
@use 'transitions';

/// -------------------
/// Pagination config
/// -------------------

$item-margin-x: spacing.$xs !default;
$item-margin-y: spacing.$xs !default;
$dot-size: 1.25rem !default;

/// -------------------
/// Pagination selectors
/// -------------------

.pagination {
  @include lib.resets-list;
  display: flex;
  align-items: center;

  &--dots {
  }

  &--numbers {
  }
}

/// -------------------
/// Pagination selectors
/// -------------------

.pagination__item {
  margin-left: $item-margin-x / 2;
  margin-right: $item-margin-x / 2;
  margin-top: $item-margin-y;
  margin-bottom: $item-margin-y;
}

/// -------------------
/// Pagination selectors
/// -------------------

.pagination__btn {
  .pagination--numbers & {
    width: 40px;
    height: 40px;
    border: 1px solid colours.$ui-three;
    border-radius: corners.$base;
    background-color: transparent;
    transition: border-color 0.2s ease-in-out;

    &--active {
      border-color: colours.$brand-one;
    }

    &:hover {
      cursor: pointer;
      border-color: colours.$brand-one;
    }
  }

  .pagination--dots & {
    font-size: 0;
    width: $dot-size;
    height: $dot-size;
    border: borders.$brand-one;
    border-radius: corners.$round;
    transition: background-color transitions.$ease, transform transitions.$ease;
    transform: scale(0.75);
    opacity: 0.5;
    cursor: pointer;

    &--active {
      background-color: colours.$brand-one;
      transform: scale(1);
      opacity: 1;
    }

    &:active,
    &:focus,
    &:hover {
      outline: none;
      background-color: colours.$brand-one;
    }
  }
}
