.receive {

    .address {
        position: relative;
        padding: 0px 48px;
        display: flex;
        flex-wrap: wrap;

        .verify {
            position: absolute;
            background: @color_white;
            border: 2px solid @color_green_primary;
            left: 0;
            right: 0;
            top: 0;
            margin: 0px 48px;
            z-index: 10001; // bigger than modal container
        }

        .value {
            // same as input (inputs.less)
            font-size: 14px;
            font-weight: 300;
            line-height: 1.42857143;
            font-family: @font-family-monospace;
            color: @color_text_primary;
            border: 1px solid @color_divider;
            border-radius: 3px;
            padding: 6px 12px;
            padding-right: 38px; // eye icon
            position: relative;
            flex: 1;
            user-select: all; /* Chrome and Opera */
        }

        button {
            padding: 6px 24px;

            &.white {
                padding: 0px;
                border: 0px;
                position: absolute;
                height: 100%;
                background: transparent;
                right: 48px;
            }

            span {
                display: flex;
                align-items: center;
                white-space: nowrap;
                &:before {
                    .icomoon-eye;
                    font-size: 32px;
                    line-height: 14px;
                    // padding-top: 2px;
                    padding-right: 4px;
                }
            }

        }

        &.hidden {
            .value {
                padding-right: 6px; // no eye icon
                user-select: none;
                border-radius: 3px 0px 0px 3px;
                &:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    background: linear-gradient(to right,
                        rgba(255,255,255, 0) 0%,
                        rgba(255,255,255, 1) 220px
                    );
                    pointer-events: none; /* so the text is still selectable */
                }
            }

            button {
                border-radius: 0px 3px 3px 0px;
            }
        }

        &.unverified {
            button span:before {
                .icomoon-eye-error;
                color: @color_error_primary;
                font-size: 32px;
                line-height: 14px;
                padding-top: 0px;
                padding-right: 4px;
            }
        }

        &.verifying {
            .value {
                background: @color_white;
                z-index: 10001; // bigger than modal container
                border-color: @color_green_primary;
                border-width: 2px;
                transform: translate(-1px, -1px);
            }

            .confirm {
                display: block;
                position: relative;
                background: @color_white;
                z-index: 10001;
                width: 100%;
                padding: 6px 12px;
                transform: translate(-1px, -1px);
                margin: 0px 2px;
            }
        }


    }

    .qr {
        margin: 24px 48px;
    }
}