/** @format */

import styled from 'styled-components';

import { AttrType } from './data';

const Container = styled.div<AttrType>`
  .ant-select-selector {
    height: ${props => props.size.height}px !important;
    border: ${props => props.input.border.size}px
      ${props => props.input.border.type} ${props => props.input.border.color} !important;
    border-radius: ${props => props.input.border.radius}px;
    text-align: ${props => props.input.textAlign} !important;
    background: ${props => props.input.bg} !important;
    font-size: ${props => props.input.textStyle.fontSize}px;
    font-weight: ${props => props.input.textStyle.fontWeight};
    font-family: ${props => props.input.textStyle.fontFamily};
    color: ${props => props.input.textStyle.color};
    &:hover {
      border: ${props => props.input.borderHover.size}px
        ${props => props.input.borderHover.type}
        ${props => props.input.borderHover.color} !important;
      border-radius: ${props => props.input.borderHover.radius}px;
    }
  }
  .ant-select-focused .ant-select-selector {
    border: ${props => props.input.borderActive.size}px
      ${props => props.input.borderActive.type}
      ${props => props.input.borderActive.color} !important;
    border-radius: ${props => props.input.borderActive.radius}px;
  }
  .ant-select-selection-item {
    line-height: ${props => props.size.height}px !important;
  }

  .ant-select-selection-placeholder {
    line-height: ${props => props.size.height}px !important;
    color: ${props => props.input.placeholderStyle.color};
    font-size: ${props => props.input.placeholderStyle.fontSize}px;
    font-weight: ${props => props.input.placeholderStyle.fontWeight};
    font-family: ${props => props.input.placeholderStyle.fontFamily};
  }
  // 下拉框
  .ant-select-dropdown {
    left: 0 !important;
    top: ${props => props.size.height}px !important;
    height: ${props =>
      props.select.listHeight ? props.select.listHeight + 'px' : 'auto'};
    padding: ${props => props.select.top}px ${props => props.select.right}px
      ${props => props.select.bottom}px ${props => props.select.left}px !important;
    margin-top: ${props => props.select.marginTop}px;
    background: ${props => props.select.bg} !important;
    overflow-y: auto !important;
  }
  // 下拉框选项
  .ant-select-item {
    height: ${props =>
      props.select.itemHeight ? props.select.itemHeight + 'px' : 'auto'};
    color: ${props => props.select.textStyle.color};
    font-size: ${props => props.select.textStyle.fontSize}px;
    font-weight: ${props => props.select.textStyle.fontWeight};
    font-family: ${props => props.select.textStyle.fontFamily};
    min-height: 0px !important;
  }
  // 下拉框选项激活
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: ${props => props.select.selectedBg} !important;
    color: ${props => props.select.selectedStyle.color};
    font-size: ${props => props.select.selectedStyle.fontSize}px;
    font-weight: ${props => props.select.selectedStyle.fontWeight};
    font-family: ${props => props.select.selectedStyle.fontFamily};
  }
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: ${props => props.select.selectedBg} !important;
    color: ${props => props.select.selectedStyle.color};
    font-size: ${props => props.select.selectedStyle.fontSize}px;
    font-weight: ${props => props.select.selectedStyle.fontWeight};
    font-family: ${props => props.select.selectedStyle.fontFamily};
  }
`;

export { Container };