.whats-new-popup { &__notifications { display: flex; flex-direction: column; } &__notification, &__first-notification { display: flex; flex-direction: column; margin: 0 16px 16px 16px; border-bottom: 1px solid var(--color-border-muted); position: relative; } &__last-notification { > * { &:nth-last-child(2) { margin-bottom: 0; }; } .whats-new-popup__intersection-observable { bottom: 8px; } } &__notification { &:last-child { border-bottom: none; } } &__notification-image { align-self: center; margin-bottom: 16px; } &__description-and-date { margin-bottom: 16px; } &__notification-date { color: var(--color-text-alternative); } &__button { margin-right: auto; } &__button, &__link { margin-bottom: 24px; } &__link { @include H6; color: var(--color-primary-default); cursor: pointer; } &__intersection-observable { bottom: 22px; position: absolute; height: 1px; width: 100%; } &__scroll-button { position: absolute; bottom: 12px; right: 12px; height: 32px; width: 32px; border-radius: 14px; border: 1px solid var(--color-border-default); background: var(--color-background-alternative); color: var(--color-icon-default); z-index: 201; cursor: pointer; opacity: 0.8; display: flex; justify-content: center; align-items: center; &:hover { opacity: 1; } } } .popover-wrap.whats-new-popup__popover { @include screen-sm-min { max-height: 750px; width: 500px; } @include screen-sm-max { max-height: 568px; } }