.pagination {
  $color: #f69c55;
  &.top {
  }
  &.bottom {
  }
  margin: 20px 0;

  a {
    .mobile {
      display: none;
    }

    font-size: 16px;
    color: gray;
    display: inline-block;
    padding: 2px 10px;
    border: thin lightgray solid;
    margin: 0 2px;
    &.dots {
      border: none;
      padding: 0;
    }
    transition: color .3s, background-color .3s;

    svg {
      transition: fill .3s;
      height: 18px;
      vertical-align: middle;
      fill: gray;
    }

    @include desktop-only {
      &:hover:not(.disabled), &.active {
        color: white;
        background-color: $color;
        svg {
          fill: white;
        }
      }
    }

    &.disabled {
      color: $lightTextGray;

      svg {
        fill: $lightTextGray;
      }
    }

    @include mobile-only {
      &.active::before {
        content: "page ";
      }

      &.other {
        display: none;
      }
    }
  }
}