/** @format */

import styled from 'styled-components';

import { AttrType } from './data';

const Container = styled.div<AttrType>`
  height: ${props => props.size.height}px;
  .datav-input {
    height: ${props => props.size.height}px;
    background-color: ${props => props.inputBgColor};
    padding: 5.6px 11px 5.6px ${props => props.inputPadding}px;
    font-size: ${props => props.inputFont?.fontSize}px;
    font-weight: ${props => props.inputFont?.fontWeight};
    font-family: ${props => props.inputFont?.fontFamily};
    color: ${props => props.inputFont?.color};
    border: ${props => props.inputBorderSize}px;
    border-color: ${props => props.inputBorderColor};
    border-radius: ${props => props.inputBorderRadius}px 0 0
      ${props => props.inputBorderRadius}px;
    border-style: ${props => props.inputBorderType};
  }
  .datav-input::-webkit-input-placeholder {
    color: ${props => props.placeholderColor};
  }
  .datav-input-btn {
    height: ${props => props.size.height}px;
    width: ${props => props.btnWidth}px;
    line-height: ${props => props.size.height}px;
    text-align: center;
    user-select: none;

    background: ${props => props.btnBgColor};
    border: ${props => props.btnBorderSize}px;
    border-color: ${props => props.btnBorderColor};
    border-radius: 0 ${props => props.btnBorderRadius}px
      ${props => props.btnBorderRadius}px 0;
    border-style: ${props => props.btnBorderType};
    font-size: ${props => props.btnFont?.fontSize}px;
    font-weight: ${props => props.btnFont?.fontWeight};
    font-family: ${props => props.btnFont?.fontFamily};
    color: ${props => props.btnFont?.color};
  }

  .datav-input-btn:hover {
    cursor: pointer;
    background: ${props => props.btnHoverBgColor};
    border: ${props => props.btnHoverBorderSize}px;
    border-color: ${props => props.btnHoverBorderColor};
    border-radius: 0 ${props => props.btnHoverBorderRadius}px
      ${props => props.btnHoverBorderRadius}px 0;
    border-style: ${props => props.btnHoverBorderType};
    font-size: ${props => props.btnHoverFont?.fontSize}px;
    font-weight: ${props => props.btnHoverFont?.fontWeight};
    font-family: ${props => props.btnHoverFont?.fontFamily};
    color: ${props => props.btnHoverFont?.color};
  }

  /* .datav-input-btn:active {
    background: ${props => props.btnClickBgColor};
    border: ${props => props.btnClickBorderSize}px;
    border-color: ${props => props.btnClickBorderColor};
    border-radius: 0 ${props => props.btnClickBorderRadius}px
      ${props => props.btnClickBorderRadius}px 0;
    border-style: ${props => props.btnClickBorderType};
    font-size: ${props => props.btnClickFont?.fontSize}px;
    font-weight: ${props => props.btnClickFont?.fontWeight};
    font-family: ${props => props.btnClickFont?.fontFamily};
    color: ${props => props.btnClickFont?.color};
  } */
`;

export { Container };