.c-pagination {
  $self: #{&};
  $list: #{$self}__list;
  $btn: #{$self}__btn;
  $item: #{$self}__item;

  $hover-background: rgba(#000, 0.15);
  $active-background: rgba(#000, 0.25);

  @at-root {
    #{$self} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      line-height: 1;
      text-align: center;
      font-size: 1.125rem;
    }

    #{$list} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }

    #{$btn},
    #{$item} {
      display: inline-block;
      width: 2em;
      height: 2em;
      border-radius: calc(2em / 2);
      line-height: 2em;
      cursor: pointer;
      //transition: background-color $g-transition, color $g-transition;

      &:hover,
      &:focus {
        text-decoration: none;
        background-color: $hover-background;
      }

      &:active {
        background-color: $active-background;
      }
    }

    #{$btn} {
      display: inline-block;
      width: 2em;
      height: 2em;
      padding: 0;
      background: transparent;
      border: none;
      appearance: none;

      &[disabled],
      &[disabled="disabled"] {
        color: rgba(#000, 0.3);
        cursor: not-allowed;

        &:hover,
        &:focus {
          background-color: transparent;
        }
      }
    }

    #{$item} {
      margin-left: 3px;
      margin-right: 3px;
      text-decoration: none;

      &.is-active {
        background-color: $color-primary;
        color: #fff;
      }
    }

  }

}