@import "@/styles/variables.scss";
@import "@/styles/mixins.scss";

.pagination {
  border-top: 0.0625rem solid rgba($F1, 0.15);
  padding: 3.75rem 0 5rem;
  display: flex;
  justify-content: space-between;

  a {
    color: $F1;
    display: flex;
    align-items: center;

    &:first-child {
      text-align: left;
      padding-right: 1rem;

      .icon {
        margin-right: 1rem;

        i {
          transform: rotate(180deg);
        }
      }
    }

    &:last-child:not(:first-child) {
      text-align: right;
      padding-left: 1rem;

      .icon {
        margin-left: 1rem;
      }
    }

    .icon {
      flex-shrink: 0;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: $grey-light;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        i {
          opacity: 1;
        }
      }

      i {
        font-size: 2rem;
        opacity: 0.4;
      }
    }

    div > label {
      @include p1;
      opacity: 0.8;
    }

    div > span {
      @include p2;
      @include multi-line-ellipsis(3);
      opacity: 0.6;

      &:hover {
        opacity: 1;
      }
    }
  }
}