import styled, { css } from 'styled-components';
import { cssUnitCalc } from 'utils';
import Icon from 'kwai-icon';
import { animated } from 'react-spring';
export const Close = styled(Icon).attrs(() => ({
    name: 'Close',
    color: '#888fa3',
    size: 'large',
}))<any>`
    position: absolute;
    right: 16px;
    cursor: pointer;
    top: 16px;
`;

export const WrapperStyle = css`
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    will-change: opacity;
    background: rgba(0, 0, 0, 0.5);
`;

export const Wrapper = animated(styled.div<any>`
    display: ${p => (p.visible ? 'flex' : 'none')};
    justify-content: center;
    align-items: center;
    ${WrapperStyle}
`);

export const ModalWrap = animated(styled.div<any>`
    background: #ffffff;
    will-change: opacity, transform;
    width: ${p => cssUnitCalc(p.width)};
    box-shadow: 0 10px 30px 0 rgba(89, 118, 178, 0.05);
    border-radius: 2px;
    position: relative;
    padding: 32px;
`);

export const FooterWrap = styled.div<any>`
    text-align: ${p => p.footerAlign};
    margin-top: 32px;
`;

export const Title = styled.div`
    font-size: 18px;
    color: #101934;
    letter-spacing: 0.5px;
    line-height: 24px;
`;