.main-quote-summary { display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; width: 100%; color: $Black-100; margin-top: 28px; margin-bottom: 56px; &__source-row, &__destination-row { width: 100%; display: flex; align-items: flex-start; justify-content: center; @include H6; color: $Grey-500; } &__source-row { align-items: center; } &__source-row-value, &__source-row-symbol { // Each of these spans can be half their container width minus the space // needed for the token icon and the span margins max-width: calc(50% - 13px); } &__source-row-value { margin-right: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } &__source-row-symbol { margin-left: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } &__destination-row { margin-top: 6px; } &__destination-row-symbol { margin-left: 5px; color: $Black-100; } &__icon, &__icon-fallback { height: 16px; width: 16px; } &__icon-fallback { padding-top: 0; font-size: 12px; line-height: 16px; } &__down-arrow { margin-top: 5px; } &__details { display: flex; flex-flow: column; align-items: center; width: 310px; position: relative; } &__quote-details-top { display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; } &__quote-large { display: flex; align-items: flex-start; margin-top: 8px; height: 50px; } &__quote-large-number { font-size: 50px; line-height: 48px; } &__quote-large-white { font-size: 40px; text-overflow: ellipsis; width: 295px; overflow: hidden; white-space: nowrap; } &__exchange-rate-container { display: flex; justify-content: center; align-items: center; width: 287px; margin-top: 14px; } &__exchange-rate-display { color: $Grey-500; } }