.footer { display: flex; align-items: stretch; flex-direction: row; justify-content: flex-start; @include mobile { background: var(--intermediate-background-color); } &__db { flex: 0 0 auto; @include area-selectable-on-secondary(); position: relative; padding: $medium-padding; padding-right: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &.footer__db--dimmed { color: var(--muted-color); &:hover { color: var(--medium-color); } } &:first-of-type { padding-left: $base-spacing; } &--expanded { flex: 1; @include mobile { flex: 0 0 auto; > .footer__db-text { display: none; } } } &-sign { font-size: 6px; vertical-align: top; margin-left: $base-padding-h; position: absolute; right: 1em; top: 1em; color: var(--action-color); &--error { color: var(--error-color); } } &-open-title { margin-left: 0.3em; } &-item { @include mobile { > .fa { display: none; } flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } } } &__btn { flex: 0 0 auto; @include area-selectable-on-secondary(); padding: $base-padding; .standalone & { padding-top: $base-padding-v; padding-bottom: 1.2em; } font-size: 1.4em; text-align: center; width: 1em; &:last-of-type { padding-right: $base-spacing; } } &__update-icon { color: var(--action-color); animation: shake 50s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s infinite; } }