SU-SWS/stanford_profile_helper

@charset "UTF-8";

.byline-social-media-wrapper {
  > div {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 10px;
  }
}

.byline-social-media-wrapper {
  &.centered-container {
    @include modular-spacing('margin-bottom', 7);

    @include grid-media-between('xs', 'md') {
      @include modular-spacing('margin-bottom', 2);
    }
  }
}

.news-date-pipe-byline {
  @include small-paragraph;
  @include margin(0);

  display: inline-block;

  div {
    display: inline-block;
  }

  span:last-child {
    @include modular-spacing('margin-right', 2);
  }
}

// Node Field - Topics.
.su-news-topics {
  @include modular-spacing('margin-top', 7);
  @include big-paragraph;

  a {
    color: $su-color-bright-red;
    text-decoration: none;
  }

  span {

    &::after {
      content: ",";
      margin-right: 5px;
      position: relative;
    }

    &:last-child::after {
      content: none;
    }
  }
}

// Node Field - More topics after article.
.section-more-topics {
  border-top: 1px solid $su-color-cool-grey-15;

  h2 {
    @include modular-spacing('padding-top', 0);
    @include big-paragraph;

    color: $su-color-black;
    font-weight: $su-font-semi-bold;
    margin-bottom: 0;
  }

  .su-news-topics {
    @include margin(0);
    @include big-paragraph;

    a {
      font-weight: $su-font-regular;
    }
  }
}

// More news topics.
.centered-container {
  &.section-more-topics {
    @include modular-spacing('margin-bottom', 5);
  }
}

// Node View - More news 3 across cards.
.stanford-news-vertical-teaser-term {
  > h2 {
    @include modular-spacing('margin-bottom', 1);

    text-align: center;
  }
}

// Node Field - Headline.
.su-news-headline {
  @include modular-spacing('margin-bottom', 3);
  @include modular-spacing('margin-top', 2);

  h1 {
    @include modular-typography(5);
  }
}

// Node Field - Dek.
.su-news-dek {
  @include big-paragraph;
  @include modular-spacing('margin-bottom', 1);
}

// Node field - Banner Image.
.su-news-banner {
  picture,
  img,
  iframe {
    min-width: 100%;
    width: 100%;
  }

  iframe {
    @include grid-media('md') {
      min-height: 450px;
    }

    @include grid-media('lg') {
      min-height: 550px;
    }
  }
}

// Node - top banner image on article
.section-banner-media {
  .main-region {
    @include modular-spacing('margin-bottom', 4);
  }
}

// Node field - Featured Image Caption.
.su-news-banner-media-caption {
  @include caption;
  @include modular-spacing('padding', null 0);
  @include modular-spacing('margin-top', 1);
  text-align: center;
}

// Social Media Plugin.
.news-social-media {
  @include small-paragraph;
  @include grid-media-max('md') {
    @include modular-spacing('margin-bottom', 2);

    div {
      &:first-of-type {
        padding-left: 0;
      }
    }
  }

  a {
    color: $su-color-cool-grey-25;
    text-decoration: none;

    span {
      @include sr-only;
    }

    &.su-link--external {
      &::after {
        @include hide-visually;
      }
    }

    svg {
      &.mailto {
        @include hide-visually;
      }
    }
  }

  i {
    font-size: 2.5rem;

    @include grid-media-max('sm') {
      font-size: 2rem;
    }

    // FA is included as a vendor dependency but the class styles are not
    // included so we have to use the mixins and font declarations here.
    &::before {
      @include fa-icon;
      color: $su-color-black;
      font-family: 'Font Awesome 5 Brands';
      font-weight: $su-font-semi-bold; // Need this for the new version of FA. Will go away later.
      transition: color 0.25s ease-out;
    }
  }

  div {
    @include padding(null 10px);

    display: inline-block;
    position: relative;
    top: -5px;
    width: auto;
  }

  .widget-wrapper-forward,
  .widget-wrapper-print {
    img {
      height: 25px;
      position: relative;
      top: 4px;
    }
  }
}

// Font Awesome icons for specific selectors.
// ------------------------------------------------
.su-news-header__social-facebook {
  i {
    &::before {
      content: fa-content($fa-var-facebook-f);
    }
  }

  &:hover,
  &:focus {
    i {
      &::before {
        color: color('Facebook', $su-social-brands);
      }
    }
  }
}

.su-news-header__social-linkedin {
  i {
    &::before {
      content: fa-content($fa-var-linkedin-in);
    }
  }

  &:hover,
  &:focus {
    i {
      &::before {
        color: color('LinkedIn', $su-social-brands);
      }
    }
  }
}

.su-news-header__social-twitter {
  i {
    &::before {
      content: fa-content($fa-var-twitter);
    }
  }

  &:hover,
  &:focus {
    i {
      &::before {
        color: color('Twitter', $su-social-brands);
      }
    }
  }
}

.su-news-header__social-forward {
  i {
    &::before {
      content: "\f0e0";
      font-family: unset;
    }
  }

  &:hover,
  &:focus {
    i {
      &::before {
        color: $su-color-bright-blue;
      }
    }
  }
}

.su-news-header__social-print {
  i {
    &::before {
      content: "\f02f";
      font-family: unset;
    }
  }

  &:hover,
  &:focus {
    i {
      &::before {
        color: $su-color-bright-blue;
      }
    }
  }
}