import styled from 'styled-components';
import { animated } from 'react-spring';
import Icon from 'kwai-icon';
import theme from 'styles/theme';

export const DownIcon = styled(Icon).attrs(() => ({ name: 'DropDown', color: '#868da1' }))<any>`
    &&& {
        margin: 8px 0 8px 10px;
        width: 20px;
        height: 20px;
        transform: rotate(${p => (p.isOpen ? 0 : -90)}deg);
        transition: all 0.3s ease-in;
    }
`;
export const IconContainer = styled.div`
    cursor: pointer;
`;
export const Wrapper = styled.div``;

export const Frame = styled.div`
    display: inline-flex;
    flex-direction: column;
    position: relative;
    padding: 4px 0 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    vertical-align: middle;
`;
export const Row = styled.div`
    display: inline-flex;
    height: 36px;
`;
export const Title = styled.div<any>`
    height: 36px;
    font-size: 14px;
    padding: 0 10px;
    color: #101934;
    letter-spacing: 0.3px;
    cursor: pointer;
    user-select: none;
    line-height: 36px;
    flex: 1;
    background-color: ${p => (p.selected ? p.theme.selected : 'white')};
    &:hover {
        background-color: ${p => p.theme.hover};
    }
`;
Title.defaultProps = { theme };
export const Content = styled(animated.div)<any>`
    display: inline-flex;
    flex-direction: column;
    will-change: transform, opacity, height;
    margin-left: 19px;
    padding-left: 10px;
    overflow: hidden;
    border-left: 1px dashed ${p => p.theme.hover};
`;
Content.defaultProps = { theme };