.pagination {
  position: relative;
  width: 160px;
  z-index: $zindex-2;

  .previous {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
    font-size: $font-size-large;
    background-color: $bg-white-dim;
    box-shadow: $card-shadow;
    transition: all 0.3s ease-out;
    text-shadow: 0 1px 1px $purple-dark;
    text-align: center;
    overflow: hidden;

    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      span {
        display: block;
        flex: 1;
        color: $purple-dark;
        transition: background 0.3s ease-out;
        &:hover {
          background-color: $purple-dim;
        }
      }
    }

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: $purple-dark;
      transform: scaleX(0);
      transform-origin: bottom left;
      transition: all 0.3s ease-out;
      z-index: $zindex-bottom;
    }
  }

  .rect {
    position: absolute;
    top: 7px;
    left: -7px;
    width: 174px;
    height: 40px;
    border: 2px solid white;
    border-top-width: 0;
    background-color: transparent;
    transition: all 0.3s ease-out;
    z-index: $zindex-bottom;

    &::before,
    &::after {
      content: '';
      position: absolute;
      background-color: white;
      transition: background 0.3s ease-out;
    }
    &::before {
      top: 0;
      left: -1px;
      width: 7px;
      height: 2px;
    }
    &::after {
      top: 0;
      right: -1px;
      width: 7px;
      height: 2px;
    }
  }

  &:hover {
    .previous {
      transform: translateY(2px);
      span {
        color: $whitesmoke;
      }
      &::before {
        transform: scaleX(1);
      }
    }

    .rect {
      border-color: $purple-dim;
      &::before,
      &::after {
        background-color: $purple-dim;
      }
    }
  }
}
