@import '~@styles/global';

$o-pagination--text: black;
$o-pagination--background: white;

.o-pagination {
  display: flex;
  justify-content: center;
  width: 100%;

  &__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.5em;
    min-width: 2.5em;
    min-height: 2.5em;
    border: 1px solid $o-pagination--text;

    color: $o-pagination--text;
    background: $o-pagination--background;
    transition: transform 0.2s $s-animation--ease-out;

    &:hover {
      color: $o-pagination--background;
      background: $o-pagination--text;
      transform: translateY(-0.1em);
    }

    &.is-active {
      color: $o-pagination--background;
      background: $o-pagination--text;
    }
  }
}