@use 'functions/color' as *;
@use 'functions/get-var' as *;
@use 'variables' as *;

// Pagination
.pagination {
  display: flex;
  list-style: none;
  // margin: $unit-1 0; // old spectre.css
  margin: get-var('unit-1') 0;
  // padding: $unit-1 0; // old spectre.css
  padding: get-var('unit-1') 0;

  .page-item {
    // margin: $unit-1 $unit-o; // old spectre.css
    margin: get-var('unit-1') get-var('unit-o');

    span {
      display: inline-block;
      // padding: $unit-1 $unit-1; // old spectre.css
      padding: get-var('unit-1') get-var('unit-1');
    }

    a {
      // border-radius: $border-radius; // old spectre.css
      border-radius: get-var('border-radius');
      display: inline-block;
      // padding: $unit-1 $unit-2; // old spectre.css
      padding: get-var('unit-1') get-var('unit-2');
      text-decoration: none;
      &:focus,
      &:hover {
        // color: $primary-color; // old spectre.css
        color: color('primary-color');
      }
    }

    &.disabled {
      a {
        cursor: default;
        opacity: 0.5;
        pointer-events: none;
      }
    }

    &.active {
      a {
        // background: $primary-color; // old spectre.css
        background: color('primary-color');
        // color: $light-color; // old spectre.css
        color: color('light-color');
      }
    }

    &.page-prev,
    &.page-next {
      flex: 1 0 50%;
    }

    &.page-next {
      text-align: right;
    }

    .page-item-title {
      margin: 0;
    }

    .page-item-subtitle {
      margin: 0;
      opacity: 0.5;
    }
  }
}