// vf-summary__publication variables $vf-summary__publication__text-typography: body--s; $vf-summary__publication-color--text: vf-color--grey; .vf-summary--publication { margin-bottom: 48px; .vf-summary__author { margin-bottom: 0px; // need to look at typographic margins again } .vf-summary__source { margin-bottom: 8px; .vf-summary__date { margin-left: 4px; position: relative; &::before, &::after { position: absolute; } &::before { content: '('; left: -4px; } &::after { content: ')'; } } } .vf-summary__text { @include set-type(text-body--5); color: set-color($vf-summary__publication-color--text); margin-bottom: 0; // this also gets zeroed by vf-summary > *:last-child sometimes } .vf-summary__text .vf-link { @media (max-width: $vf-breakpoint--md - 1px) { &:first-child { display: block; } } @media (min-width: $vf-breakpoint--md) { margin-left: 8px; } } // vf-summary--publication can also sit inside a vf-box - so we need to adjust some sizes .vf-box & { .vf-summary__title { font-size: 16px; margin-bottom: 4px; } .vf-summary__author { margin-bottom: 4px; } } // vf-summary--publication inside of a vf-box will have more than one item in the vf-box, so we need to add some vertical spacing for more than one publication item in a box .vf-box &:not(:first-of-type) { margin-bottom: 12px; } }