import styled from 'styled-components';
import * as Color from 'color';
import { COLOR_PALETTE } from '../../constants/colors';
import { ICON_CODE } from '../../constants/iconCodes';

export const Container = styled.div`
    font-family: Varela Round;
    position: relative;
    width: 100%;
`;

export const InputWrapper = styled.div`
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    width: 100%;
`;

export interface InputStyle {
    pointerCursor: boolean;
}

export const Input = styled.input`
    background-color: ${COLOR_PALETTE.WHITE};
    border: solid 2px ${COLOR_PALETTE.BLUE_LIGHT_1};
    border-radius: 3px;
    box-shadow: 0 2px 4px 0
        ${Color(COLOR_PALETTE.GREY_80)
        .alpha(0.25)
        .toString()};
    color: ${COLOR_PALETTE.GREY_DARK_1};
    cursor: ${(props: InputStyle) =>
        props.pointerCursor ? "pointer" : "unset"};
    font-size: 10px;
    height: 15px;
    padding-left: 7px;
    width: calc(100% - 7px);
    ::placeholder {
        color: ${COLOR_PALETTE.BLUE_LIGHT_2};
        letter-spacing: 0.5px;
    }
`;

export const InputSelectIcon = styled.div`
    cursor: pointer;
    display: flex;
    position: absolute;
    right: 7px;
    &:before {
        font-family: 'icomoon' !important;
        font-size: 5px;
        font-weight: bold;
        width: 20%;
        height: 100%;
        color: ${COLOR_PALETTE.GREY_DARK_1};
    };
`;

export const InputSelectIconOnExpand = InputSelectIcon.extend`
    &:before {
        content: '\\${ICON_CODE.DROPDOWN_ARROW}';
    };
`;

export const InputSelectIconOnCollapse = InputSelectIcon.extend`
    &:before {
        content: '\\${ICON_CODE.DROPDOWN_ARROW}';
    };
`;