//
// @file
// Paragraphs summary CSS.
//

@import "variables";

.paragraphs {
  &-badge {
    display: inline-block;
    padding: $badge-padding-y $badge-padding-x;
    background: $badge-color;
    border-radius: $border-radius;
    color: #fff;
    cursor: default;
    font-size: 90%;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }
  }
}

.paragraph-info {
  display: flex;
  // Needed not just because of centering but also to prevent span child to
  // stretch vertically.
  align-items: center;
}

// We are using .js prefix here mainly because we want to apply this style rules
// only for JS version of the element.
.js {
  .paragraphs-collapsed-description {
    position: relative;
    height: 1.538em;
    overflow: hidden;
    color: #777;
    word-break: break-all;
    line-height: 1.538em;

    // Fade out text element.
    &::after {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 3em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
      content: "\00a0";
    }
  }
}
