.awaiting-swap { display: flex; flex-flow: column; align-items: center; flex: 1; width: 100%; &__content { display: flex; flex-flow: column; justify-content: center; height: 100%; padding-left: 32px; padding-right: 32px; } div { text-align: center; display: flex; justify-content: center; } a { color: var(--color-primary-default); } &__status-image { margin-top: 12px; margin-bottom: 16px; } &__header { @include H3; color: var(--color-text-default); } &__main-description { @include H6; color: var(--color-text-alternative); margin-top: 16px; width: 100%; } &__time-estimate { @include H7; color: var(--color-text-default); margin-top: 20px; font-style: italic; > span { display: flex; } &--invisible { visibility: hidden; } } &__time-estimate-text { margin-right: 2px; font-weight: bold; } &__view-on-etherscan, &__support-link { color: var(--color-primary-default); margin-top: 24px; cursor: pointer; } &__support-link { @include H6; } &__view-on-etherscan { @include H7; transition: opacity 1s ease-in-out; } &__view-on-etherscan--invisible { opacity: 0; } &__view-on-etherscan--visible { opacity: 1; } &__amount-and-symbol { color: var(--color-text-default); font-weight: bold; } }