.contentinfo {
  @include padding-leader;
  @include padding-trailer;
  background: image-url("textures/grey-prism.svg") left top repeat-x;
  color: $color-text-weak;

  .sl-l-container {
    @include padding-leader;
    @include padding-trailer;
    height: 100%;
  }

  ul {
    @include font-size-small;
    @include adjust-leading-to(1);
  }

  p {
    @include padding-trailer(.25);
    margin: {
      right: 0;
      left:  0;
    }

    &:last-child { padding-bottom: 0; }
  }

  a {
    color: $color-text;

    &:hover,
    &:focus { color: $color-text-strong; }
  }

}

.contentinfo-tools,
.contentinfo-social { @include padding-leader($font-size: $font-size-small); }

.contentinfo-tools ul {
  @extend %horizontal-list;
  font-size: sl-px-to-rem(16px);
}

@include breakpoint($tablet-large) {
  .contentinfo {
    padding: {
         top: 0;
      bottom: 0;
    }
    height: $sticky-contentinfo-height;

    ul { @extend %table-layout-tablet-large; }

    li { @extend %table-layout-cell-tablet-large; }
  }

  .contentinfo-tools,
  .contentinfo-social {
    padding: 0;
    width: 1px;
    white-space: nowrap;
  }

  .contentinfo-tools ul li {
    display: table-cell;
    margin: 0;
    padding-right: sl-px-to-rem(32px);
  }

  .contentinfo-social {
    padding-left: sl-px-to-rem(64px);
    line-height: 0;
  }
}