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

  $item-size: 2em;
  $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: $item-size;
      height: $item-size;
      border-radius: #{$item-size} / 2;
      cursor: pointer;

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

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

    #{$btn} {
      display: inline-block;
      padding: 0;
      background: transparent;
      border: none;
      appearance: none;
      line-height: 1;

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

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

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

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

  }

}