import styled from 'styled-components'
import {rem, zIndex} from '../style/function.style'

export const BaseRechargeItem = styled.div`
.m-qr-pay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: ${rem(598)};
    height: ${rem(810)};
    margin: ${rem(-405)} 0 0 ${rem(-299)};
    background: #fff;
    border-radius: ${rem(10)};
    text-align: center;
    z-index: ${zIndex('modal')};

    h4 {
        margin: ${rem(115)} 0 ${rem(34)};
        font-size: ${rem(40)};
        font-weight: bold;
        color: #24211F;
    }

    .inner {
        margin: 0 auto;
        width: ${rem(340)};
        height: ${rem(340)};

        img {
            width: 100%;
            height: 100%;
            box-shadow: 0 ${rem(24)} ${rem(30)} 0 rgba(123,123,123,0.76);
        }
    }

    .tip {
        margin: ${rem(60)} 0 ${rem(40)} 0;
        font-size: ${rem(32)};
        color: #666461;
    }

    .PS {
        font-size: ${rem(24)};
        color: #8A8886;
    }
}
.m-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: ${zIndex('mask')};
    background: rgba(0, 0, 0, .5);
}
.m-resultModal,
.m-confirmModal {
    border-radius: ${rem(40)};
    z-index: ${zIndex('modal')};
    .content {

        p {
            margin-bottom: 0;
        }

        .text {
            font-size: ${rem(30)};
            color: #222;
            line-height: ${rem(45)};
            text-align: center;

            &.text-s {
                font-size: ${rem(24)};
                line-height: ${rem(36)};
            }
        }

        .text-tip {
            margin-top: ${rem(10)};
            font-size: ${rem(24)};
            color: #999;
            text-align: center;
        }

        .tip-qrcode {
            margin: 0 auto;
            width: ${rem(240)};
        }

        img {
            display: block;
            margin: ${rem(27)} auto ${rem(8)};
            width: ${rem(206)};
            height: ${rem(206)};
        }

        em {
            margin: 0;
            font-size: ${rem(30)};
            font-weight: normal;
            color: #f24949;
        }

        .black {
            color: #24211F;
        }

        .bold {
            font-weight: bold;
        }
    }

    .action {
        .btn {
            font-size: ${rem(30)};
        }
    }
}
`