.home-notification-wrapper--show-all, .home-notification-wrapper--show-first { display: flex; flex-direction: column; width: 472px; position: absolute; bottom: 0; right: 0; margin: 8px; @media screen and (max-width: $break-small) { width: 340px; } .home-notification-wrapper__i-container { position: relative; width: 100%; height: 100%; .fa-sm { display: initial; position: absolute; bottom: 14px; left: 16px; color: white; cursor: pointer; visibility: visible; &:hover { @include H4; color: #b0d7f2; } } } } .home-notification-wrapper--show-all { justify-content: flex-end; margin-bottom: 0; .home-notification-wrapper__i-container { height: 0; } > div { position: relative; margin-top: 8px; } .fa-sm { margin-bottom: 8px; } } .home-notification-wrapper--show-first { > div { position: fixed; bottom: 8px; right: 8px; visibility: hidden; } > div:first-of-type { visibility: visible; } .fa-sm { position: relative; display: initial; } } .flipped { transform: rotate(180deg); }