import { createGlobalStyle, css } from 'styled-components';
import { rgba } from '../../_utils/color-tool';
const timePickerStyle = css `
  .ant-picker-time-panel-column {
    > li {
      &.ant-picker-time-panel-cell {
        .ant-picker-time-panel-cell-inner {
          color: ${({ theme }) => theme.text.primary};
          &:hover {
            background-color: ${({ theme }) => rgba(theme.background.menu, 0.2)};
          }
        }
      }
      &.ant-picker-time-panel-cell-selected {
        .ant-picker-time-panel-cell-inner {
          background-color: ${({ theme }) => theme.button.normal.bg};
        }
      }
    }
    &:not(:first-child) {
      border-color: ${({ theme }) => theme.border.primary};
    }
  }
  .ant-picker-ok {
    .ant-btn {
      height: 22px;
      padding: 0 10px;
      min-width: 40px;
    }
  }
`;
const TimePickerStyle = createGlobalStyle `${timePickerStyle}`;
export default TimePickerStyle;
