/////////////////////// Styles for Telegraf plugin cards ///////////////////////

.plugin-card {
  position: relative;
  padding: 1rem 1.5rem;
  margin-bottom: .5rem;
  justify-content: center;
  align-items: center;
  background: rgba($body-bg, .4);
  border-radius: $radius;

  h3 {
    padding: 0;
    margin-top: .25rem;
  }

  &.new h3:after {
    content: "New";
    margin-left: .3rem;
    padding: .25rem .5rem;
    font-style: italic;
    color: $nav-active;
    font-size: 1.2rem;
    opacity: 1;
  }

  p {
    &.meta {
      margin: .75rem 0;
      font-weight: $medium;
      line-height: 1.75rem;

      .deprecated {
        margin-left: .5rem;
        font-style: italic;
        color: $article-code-accent7;
      }
    }
  }

  a.external {
    position: relative;
    margin: 0 0 0 -.25rem;
    display: inline-block;
    padding: .4rem .85rem;
    background-color: rgba($article-text, .1);
    border-radius: 1rem;
    font-size: .9rem;
    font-weight: $medium;
    color: $article-text;

    &:after {
      content: "?";
      position: absolute;
      display: block;
      top: -3px;
      right: -3px;
      padding: 0.1rem 0.3rem .04rem;
      color: $g20-white;
      @include gradient($article-btn-gradient);
      border-radius: 50%;
      font-weight: bold;
      line-height: .8rem;
      font-size: .7rem;
      box-shadow: 1px 1px 4px $sidebar-search-shadow;
      opacity: 0;
      transition: opacity .2s;
    }

    &:hover {
      color: $article-text;
      &:after {opacity: 1;}
    }
  }

  & .info {
    & > p:last-child { margin-bottom: .5rem; }
    & > ul:last-child { margin-bottom: .5rem; }
    & > ol:last-child { margin-bottom: .5rem; }
  }

  .github-link {
    position: absolute;
    top: 0;
    right: 0.5rem;
    opacity: 0.25;
    transition: opacity .2s, background .2s, color .2s;
    @include gradient($article-btn-gradient);

    .icon-github {
      font-size: 1.2rem;
      margin: 0 .25rem 0 0;
    }
  }

  &:hover {
    .github-link {
      opacity: 1;
      @include gradient($article-btn-gradient);
    }
  }

  // Special use-case for using block quotes in the yaml provided by the data file
  blockquote {
    border-color: $article-note-base;
    background: rgba($article-note-base, .12);
    h3,h4,h5,h6 { color: $article-note-heading; }
    p, li {
      color: $article-note-text;
      font-size: 1rem;
      font-style: normal;
    }
    strong { color: inherit; }
    a {
      color: $article-note-link;
      code:after {
        border-color: transparent rgba($article-note-code, .35) transparent transparent;
      }
      &:hover {
        color: $article-note-link-hover;
        code:after {
          border-color: transparent $article-note-link-hover transparent transparent;
        }
      }
    }
    ol li:before { color: $article-note-text; }
    code, pre{
      color: $article-note-code;
      background: $article-note-code-bg;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(small) {

  .plugin-card {
    .github-link {
      opacity: 1;
      @include gradient($article-btn-gradient)
      padding: .25rem .35rem .35rem;
      line-height: 0;
      .icon-github { margin: 0; }
      .hide { display: none; }
    }
  }
}