@import 'variables';

.pagination {
  display: flex;
  margin-top: $spacer * 2;
  margin-bottom: $spacer;
  justify-content: space-between;

  > div {
    &:first-child {
      margin-right: $spacer;
    }

    &:last-child {
      margin-left: $spacer;
      text-align: right;
    }
  }
}

.number {
  text-align: center;
  width: 2rem;
  height: 2rem;
  line-height: 1.7;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid transparent;

  &:hover,
  &:focus {
    background: rgba(255, 255, 255, 0.3);
    border-color: darken($brand-grey-dimmed, 5%);
  }
}

.current {
  composes: number;
  cursor: default;
  pointer-events: none;
  border: 1px solid darken($brand-grey-dimmed, 5%);
  color: $brand-grey-light;

  :global(.dark) & {
    border-color: darken($brand-grey-light, 15%);
  }
}