/**
 * @desc 数字输入框样式
 * @author denghuan
 */
import { createGlobalStyle, css } from 'styled-components';
const inputNumberStyle = css `
  .ant-input-number {
    border-color: ${({ theme }) => theme.input.border};
    background-color: ${({ theme }) => theme.input.bg};
    color: ${({ theme }) => theme.text.primary};

    input {
      padding-left: 16px;
      padding-right: 16px;

      &::placeholder {
        color: ${({ theme }) => theme.input.placeholder};
      }
    }

    &:hover,
    &:active,
    &.ant-input-number-focused {
      border-color: ${({ theme }) => theme.main};
    }

    &.ant-input-number-disabled {
      background-color: ${({ theme }) => theme.input.disabled.bg};
      border-color: ${({ theme }) => theme.input.disabled.bg};

      input {
        &::placeholder {
          color: ${({ theme }) => theme.input.disabled.placeholder};
        }
      }
    }

    &:hover,
    &:active {
      .ant-input-number-handler-wrap {
        opacity: 1;
      }
    }

    .ant-input-number-handler-wrap {
      background-color: ${({ theme }) => theme.input.bg};

      &,
      & .ant-input-number-handler-down {
        border-color: ${({ theme }) => theme.input.border};
      }

      .ant-input-number-handler {
        background-color: ${({ theme }) => theme.input.bg};

        svg {
          color: ${({ theme }) => theme.text.tertiary};
        }

        &:hover {
          svg {
            color: ${({ theme }) => theme.main};
          }
        }
      }
    }
  }
`;
const InputNumberStyle = createGlobalStyle `${inputNumberStyle}`;
export default InputNumberStyle;
