/* ==========================================================================
   Content Placeholder
   ========================================================================== */

.content-placeholder {
  text-align: center;

  &.content-placeholder--data {
    padding: 24px 0;
  }

  .content-placeholder__title {
    color: rgba($primary, .8);
    font-family: $font-primary;
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
  }

  .content-placeholder__subtitle {
    color: rgba($primary, .6);
    font-family: $font-secondary;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
    position: relative;
    top: -6px;
  }

  .content-placeholder__link {
    color: $accent;
    font-size: 12px;
    font-weight: 600;

    @include anim(color);

    &:hover,
    &:focus {
      color: rgba($accent, .8);
    }
  }

  &.content-placeholder--dark {
    .content-placeholder__title {
      color: rgba($white, .8);
    }

    .content-placeholder__subtitle {
      color: rgba($white, .6);
    }
  }

  &.content-placeholder--logs {
    left: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}