import styled, { css } from 'styled-components';
import Btn from '../button';
import Select from '../select';
import Icon from 'kwai-icon';
export const Wrapper = styled.div`
    display: inline-flex;
`;

export const Button = styled(Btn)<any>`
    width: ${p => (p.type === 'normal' ? '32px' : '20px')};
    height: ${p => (p.type === 'normal' ? '32px' : '20px')};
    line-height: 1;
    svg {
        transform: none;
    }
    ${p =>
        p.type === 'mini' &&
        css`
            border: none !important;
        `};
    padding: 0;
    :not(:last-child) {
        margin-right: ${p => (p.type === 'normal' ? '8px' : '4px')};
    }
    &:hover .more-normal {
        display: none;
    }
    &&&:hover .more-hover {
        display: inline-block;
    }
`;

export const Left = styled(Icon).attrs(() => ({
    name: 'Left',
    color: '#747a8c',
}))<any>`
    &&& {
        margin: 0;
    }
`;

export const LeftHover = styled(Icon).attrs(() => ({
    name: 'DoubleLeft',
    color: '#33b7bb',
    fillColorRule: '&&& path',
}))<any>`
    &&& {
        display: none;
        margin: 0;
    }
`;
export const More = styled(Icon).attrs(() => ({
    name: 'More',
    color: '#747a8c',
}))<any>`
    &&& {
        margin: 0;
    }
`;
export const Right = styled(Icon).attrs(() => ({
    name: 'Right',
    color: '#747a8c',
}))<any>`
    &&& {
        margin: 0;
    }
`;
export const RightHover = styled(Icon).attrs(() => ({
    name: 'DoubleRight',
    color: '#33b7bb',
    fillColorRule: '&&& path',
}))<any>`
    &&& {
        margin: 0;
        display: none;
    }
`;

export const PageSizeOptions = styled(Select)<any>`
    &&& input {
        height: ${p => (p.type === 'normal' ? '32px' : '20px')};
    }
    text-align: left;
    .down-icon {
        width: 20px;
        height: 20px;
    }
    ${p =>
        p.type === 'mini' &&
        css`
            &&& svg {
                top: 0;
            }
        `}
`;

export const Jumper = styled.div<any>`
    display: inline-block;
    height: ${p => (p.type === 'normal' ? '32px' : '20px')};
    margin-left: ${p => (p.type === 'normal' ? '16px' : '8px')};
    > div {
        margin: 0 8px;
    }
    input {
        height: ${p => (p.type === 'normal' ? '32px' : '20px')};
    }
`;