// RENAME this file to link-previews.styl

.s_LnPv-Blk
  padding: 24px 24px 9px;
  margin: 15px 0 20px 2px;  // margin-left leaves space for the drop-shadow
  //background: hsl(0, 0%, 94.5%);
  //background: hsl(0, 0%, 98%);
  //box-shadow: 3px 2px 8px rgba(0,0,0,0.4);
  //box-shadow: inset 3px 2px 8px rgba(0,0,0,0.3);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  &.s_LnPv-Err
    color: hsl(0, 0%, 15%);
    .s_LnPv_L-Err
      margin-left: 5px;
    code
      background: inherit;
      color: hsl(0, 0%, 23%);

// Make it simpler to see where one link preview ends and the next start,
// if there're many after each other, by adding more margin.
// But not internal link preview — they have no box-shadow so need less space.
.s_LnPv-Blk:not(.s_LnPv-Int) + .s_LnPv-Blk
  margin-top: 27px;

.dw-id2 .s_LnPv-Blk
  // Less padding, maybe column more narrow?
  padding-left: 18px;
  padding-right: 18px;

.s_LnPv-Blk iframe
  margin: 0 auto;
  display: block;
  width: calc(100% - 40px);
  border: none;
  // Gets corrected quickly by this iframe srcdoc=.. script: [OEMBHGHT],
  // however, for other iframes, e.g. Telegram, can a bit too tall. [TELEGRIFR]
  height: auto;
  overflow: hidden;

// Height: The default is 390px, see:
// https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
.s_LnPv-YouTube iframe
  height: 390px;


.s_LnPv_ViewAt
  display: block;
  margin: 9px auto 5px;
  text-align: center;

.s_LnPv-Blk.s_LnPv-Int
  padding: 15px 16px 17px;
  margin-bottom: 16px;
  // Make *internal* link previews look different — good to know they're to the same
  // site. Make it look like a quote (by adding border-left) since we know it's
  // a title and excerpt, kind of a quote.
  box-shadow: none;
  background: hsl(0, 0%, 97.5%);
  border-left: 8px solid hsl(160, 0%, 90%);

  a // the title
    font-weight: bold;
    opacity: 0.95;
  blockquote
    padding: 0;
    border: none;
    margin: 10px 0 0;
    // Darker color, since light gray background.
    color: hsl(0, 0%, 11%);

.s_LnPv-oEmb .s_LnPv_ViewAt
  margin: 7px auto 7px;  // already 10px extra margin-top: [oemb_extr_height]


.s_LnPv-YouTube iframe
  width: 100%;
  max-width: 480px;
  height: 270px;


.s_LnPv-Img
  // There's no View-at text below, so use the same padding also at the bottom.
  padding: 18px;

/*  But Utterscroll is disabled [2D_LAYOUT]
.s_LnPv-Img > a
  float: left;  // makes Utterscroll work on any whitespace to the right of the image
  max-width: 100%;
  */

// vim: fdm=marker et ts=2 sw=2 tw=0 list
