/* --- 04. COMPOSANTS --- */

/*
 * Les différents composants réutilisables de la page.
 *
 */

@import 'components/cards';

@import 'components/buttons';

@import 'components/previews';

.article-meta, .article-nav {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.5rem;
}

.article-category-link {
    @include button($button_small);
    padding-left: $button_small;
    padding-right: $button_small;
    @include button-color($color-info, $color-button-light);
      &:hover, &:active {
          @include borders();
      }

      p &:last-child {
          margin-bottom:0;
      }
}

a.article-nav-link-wrap {
  @include button($button_large);
  padding-left: $button_large;
  padding-right: $button_large;
    &:hover, &:active {
        @include borders();
    }

    p &:last-child {
        margin-bottom:0;
    }
    @include button-color($color-info, $color-button-light);
}

.article-more-link {
  text-align: center;
  a {
      @include button($button_large);
      padding-left: $button_large;
      padding-right: $button_large;
        &:hover, &:active {
            @include borders();
        }

        p &:last-child {
            margin-bottom:0;
        }
      @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
  }
}

.pigimg {
  padding-bottom:1.5rem;
}

#page-nav {
  padding-bottom:1.5rem;
  .page-number, .next, .prev {
      @include button($button_small);
      padding-left: $button_small;
      padding-right: $button_small;
      @include button-color($color-light2, $color-button-dark);

      &.current {
        @include button-color($color-info, $color-button-light);
      }
  }
}
