.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: $Blue-500; } &__status-image { margin-top: 12px; margin-bottom: 16px; } &__header { @include H3; color: $Black-100; } &__main-descrption { @include H6; color: $Grey-500; margin-top: 16px; width: 100%; } &__time-estimate { @include H7; color: $Black-100; 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: $Blue-500; 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: $Black-100; font-weight: bold; } }