@use '../../../../styles';

.receive-screen {
    .receive-screen__account_details {
        display: flex;
        align-items: center;
        margin-bottom: 28px;

        .receive-screen__account_details-title {
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 0.25px;
            color: #293166;
            padding: 0 12px;
        }
    }

    .receive-screen__title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
        margin-bottom: 16px;

        .receive-screen__title-symbol {
            display: flex;
            align-items: center;
            gap: 4px;

            > .asset-icon {
                width: 20px;
                height: 20px;
            }
        }
    }

    .receive-screen__qr-code {
        margin: 0 -16px;
    }

    .receive-screen__footer {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: #fffaed;
        padding: 16px;
        margin-top: 0;

        .receive-screen__footer-text {
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0.2px;
            color: #000;
        }

        .receive-screen__footer-btn {
            @include styles.button-reset;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border: 1px solid styles.$warning;
            font-weight: 700;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0.6px;
            color: styles.$warning;
        }
    }

    .receive-screen__dens {
        margin-top: 24px;

        .receive-screen__dens-title {
            font-weight: 600;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.1px;
            color: #000;
        }

        .receive-screen__dens-text {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0.1px;
            color: styles.$neutral-400;
            margin-top: 4px;
        }

        .dens-list {
            margin-top: 8px;

            .dens-list__item {
                display: flex;
                align-items: center;
                gap: 16px;
                width: 100%;
                padding: 12px 0;
                border-top: 1px solid styles.$neutral-850;
                overflow: hidden;

                &:first-child {
                    border-top: none;
                }
            }

            .dens-list__item-path {
                @include styles.ellipsis;
                flex: 1 1 0;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: 0.1px;
                color: #000;
            }

            .dens-list__item-icon {
                flex: 0 0 auto;
                color: #c6c9cf;
                cursor: pointer;
            }
        }
    }
}
