_digest.scss

/*
    Digests are additional short information on the list item
    to the right of the entry on larger screens and below otherwise.
    They can be put into a "digest-container" if a separator border is needed
    or used standalone

    Digests come in 2-column format on desktops and tablets and only switch to
    1-colum for phones where the device width becomes to small.
*/
.digest {
    @include font-text;
    @include font-small;

    display:            inline-flex;
    column-count:       2;
    column-gap:         1rem;
    justify-content:    space-around;


    @include medium-is-phone {
        @include font-extra-small;

        display:        block;
        column-count:   1;
    }

    h3 {
        margin-bottom:  0.1rem;
        margin-top:     0.25rem;
    }

    div {
        display:    inline-block; /* Should prevent column breaks inside divs */
    }
}

.digest-container {

    padding-left:   1rem;
    border-left:    1px solid $color-content-light-gray;

    /*
        On tablets and phones the digest goes under the preview.
        The border moves from left to top and the padding is no longer needed.
    */
    @include medium-is-tablet-minus {
        width:          100%;
        border-left:    none;
        border-top:     1px solid $color-content-light-gray;
        padding-left:   0;
    }
}

/*
 * When included in the title, digests additionally get a less transparent
 * blue background and a minimum widh to prevent them from being squashed by
 * the title heading.
 * (This is important for the row layout in desktops, in the column layout there
 * is no danger of the digest having not enough horizontal space)
 */
.title-content-container {

    .digest {
        min-width:          40%;
        padding:            0.5rem;
        border-radius:      $border-radius;
        background-color:   rgba($color-helmholtz-blue, 0.825)
    }
}