.collapsible-notices { display: grid; grid-template-columns: auto 168px; grid-template-rows: auto 55px; grid-template-areas: 'notices notices' '. toggle-button'; &.collapsed p { display: none; } .notices { grid-area: notices; :last-child { margin-bottom: 0; } } button { @extend %button; color: rgb(var(--color-action)); float: right; grid-area: toggle-button; margin-top: 1em; margin-bottom: 2em; } button.expand::before { @extend %with-chevron-down-mask, %as-pseudo; } button.collapse::before { @extend %with-chevron-up-mask, %as-pseudo; } }