.snack-bar { bottom: 2rem; left: 2rem; background-color: var(--color-snack-bg); color: var(--color-snack); border-radius: 0.5rem; padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium); position: fixed; transition: all var(--transition-duration) var(--transition-type); z-index: 10000; // hack to get it over react modal } .snack-bar--upgrade { @extend .snack-bar; left: auto; right: 2rem; background-color: var(--color-snack-bg-upgrade); display: flex; flex-direction: column; justify-content: center; align-items: center; } .snack-bar--error { background-color: var(--color-snack-bg-error); } .snack-bar__action { display: inline-block; margin: var(--spacing-small) 0; min-width: min-content; span:hover { text-decoration: underline; } } .snack-bar__message { align-items: center; display: flex; flex-direction: row; font-size: var(--font-body); div { &:nth-of-type(1) { margin-right: var(--spacing-medium); } } }