///////////////////////////// File System Diagrams /////////////////////////////

.fs-diagram {
  display: inline-block;
  margin: 1rem 0 2rem;
  padding: 1.5rem 2.5rem 1.5rem 1.5rem;
  font-family: $code;
  border-radius: $radius;
  box-shadow: 1px 3px 10px $article-shadow;
  & > ul { padding: 0; margin: 0;
    li { line-height: 2rem; color: $article-code; }
    ul { padding-left: 2rem;
      li {
        position: relative;
        margin: 0;
        line-height: 2rem;
        border-left: 1px solid $article-code;
        &:before {
          content: "";
          display: inline-block;
          width: 1rem;
          height: .25rem;
          margin-right: .55rem;
          border-top: 1px solid $article-code;
        }
        &:last-child {
          border: none;
          &:after {
            content: "";
            position: absolute;
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
            height: 1.1rem;
            border-left: 1px solid $article-code;
          }
        }
      }
    }
  }
  ul { list-style: none; }
}

///////////////////////////////// Shard diagram ////////////////////////////////
#shard-diagram, #data-retention {
  display: flex;
  flex-direction: column;
  max-width: 550px;
  margin: 2.5rem auto 3rem;

  p {margin-bottom: 0; line-height: 1.25em;}

  .periods {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .timeline {
    display: flex;
    flex-direction: row;
    margin-top: .25rem;
    padding:  0 .5rem;

    .interval {
      border-top: 1px solid $article-text;
      border-right: 1px solid $article-text;
      height: .75rem;
      flex-grow: 1;
      &:first-child {
        border-left: 1px solid $article-text;
      }
    }

    .one-quarter {width: 25%; height: .75rem;}
    .three-quarters {width: 75%; height: .75rem;}
    .border-left {border-left: 1px solid $article-text;}
    .retention-label {
      position: relative;
      &:before {
        content: "";
        display: inline-block;
        width: .65rem;
        margin-right: .5rem;
        border-top: 1px solid $article-text;
        vertical-align: middle;
      }
    }
    .deleted-label {
      color: $r-ruby;
      text-align: center;
      font-size: .9rem;
    }
  }
  .shard-groups {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: .25rem;
    padding: .5rem;
    line-height: 1rem;

    .shard-group {
      margin:  0 .25rem;
      text-align: center;
      padding: .5rem;
      border-radius: .5rem;
      background: $html-diagram-shard-group-bg;
      flex-grow: 1;
      box-shadow: 2px 2px 8px $article-shadow;
      p:first-child {margin-bottom: .75rem;}

      .shard {
        display: block;
        margin-top: .5rem;
        padding: .65rem 1rem;
        color: #fff;
        border-radius: .25rem;
        @include gradient($article-table-header, 90deg);
        background-attachment: fixed;
      }

      &.deleted {
        opacity: .3;
        .shard {@include gradient($grad-red-dark)}
      }
    }
  }
}

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

@include media(small) {
  #shard-diagram {
    flex-direction: row;
    .periods {flex-direction: column; margin-right: .5rem; }
    .timeline {
      flex-direction: column;
      padding: .5rem 0;
      .interval {
        width: .75rem;
        border-top: none;
        border-right: none;
        border-left: 1px solid $article-text;
        border-bottom: 1px solid $article-text;
        &:first-child{ border-top: 1px solid $article-text; }
      }
    }
    .shard-groups {
      flex-direction: column;
      .shard-group { margin: .25rem 0;}
    }
  }
};