bih/spotify-ruby

//
// Page nav (components/_page-nav.scss)
//

// ----- General ----- 
.page-nav {
  background-color: $color-theme-green;
  color: $color-dark-green;
  padding: 1.25rem 0;

  @media (min-width: $screen-sm-min) {
    padding: 2.1875rem 0 2.5rem 0;
  }
}

// ----- Item ----- 
.page-nav__item {
  @include link-reset;
  display: block;
  font-family: $font-family-secondary;
  font-weight: 500;
  text-align: center;

  @media (min-width: $screen-sm-min) {
    font-size: $font-size-h3;
  }

  & + & {
    border-top: 1px solid rgba($color-dark, 0.15);
    margin-top: 1.25rem;
    padding-top: 1.25rem;

    @media (min-width: $screen-sm-min) {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
  }

  .icon {
    bottom: -0.0625rem;
    display: inline-block;
    position: relative;
    transition: transform 0.2s;
  }
}

.page-nav__item--prev {
  @media (min-width: $screen-sm-min) {
    float: left;
  }

  &:hover,
  &:focus,
  &:active {
    .icon {
      @include translate(-0.625rem, 0);
    }
  }

  .icon {
    margin-right: 0.625rem;
  }
}

.page-nav__item--next {
  @media (min-width: $screen-sm-min) {
    float: right;
  }

  &:hover,
  &:focus,
  &:active {
    .icon {
      @include translate(0.625rem, 0);
    }
  }

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