/**
 * @desc 日期选择框样式
 * @author denghuan
 */
import { createGlobalStyle, css } from 'styled-components';
const datePickerStyle = css `
  .ant-picker {
    background-color: ${({ theme }) => theme.input.bg};
    border-color: ${({ theme }) => theme.select.border};
    width: 100%;

    &.ant-picker-focused {
      box-shadow: none;
    }

    &[disabled] {
      background: red;
    }

    &.ant-picker-disabled {
      background-color: ${({ theme }) => theme.background.disabled};
      border: none;
      height: 32px;
    }

    .ant-picker-input {
      input {
        color: ${({ theme }) => theme.text.primary};
        &[disabled] {
          color: ${({ theme }) => theme.text.secondary};
        }

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

    .ant-picker-active-bar {
      background-color: ${({ theme }) => theme.main};
    }

    .ant-picker-range-separator .ant-picker-separator,
    .ant-picker-suffix.ant-picker-suffix,
    .ant-picker-clear {
      color: ${({ theme }) => theme.text.secondary};

      &.ant-picker-clear {
        background-color: ${({ theme }) => theme.background.content.primary};
      }
    }
  }

  // 日期下拉框
  .ant-picker-dropdown {
    .ant-picker-range-arrow::after {
      border: none;
      background-color: ${({ theme }) => theme.picker.dropdown};
    }

    .ant-picker-panel-container {
      background-color: ${({ theme }) => theme.picker.dropdown};

      .ant-picker-panel {
        border: none;

        .ant-picker-header {
          height: 40px;
          border-color: ${({ theme }) => theme.border.secondary};
          color: ${({ theme }) => theme.text.primary};

          & > button {
            color: ${({ theme }) => theme.text.secondary};
          }

          .ant-picker-header-view {
            button:hover {
              color: ${({ theme }) => theme.main};
            }
          }
        }

        .ant-picker-year-panel,
        .ant-picker-month-panel,
        .ant-picker-date-panel {
          width: 248px;
        }

        .ant-picker-decade-panel {
          width: 340px;
        }

        .ant-picker-date-panel {
          .ant-picker-body {
            .ant-picker-content {
              width: 224px;
              table-layout: auto;
              border-spacing: 0px;

              .ant-picker-cell {
                width: 32px;
                height: 32px;
                color: ${({ theme }) => theme.text.primary};

                &.ant-picker-cell-in-view {
                  color: ${({ theme }) => theme.text.primary};

                  &::before {
                    background-color: transparent;
                  }

                  &::after {
                    border: none;
                  }
                }

                .ant-picker-cell-inner {
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 2px;

                  &:hover {
                    background-color: ${({ theme }) => theme.main};
                    color: ${({ theme }) => theme.text.primary};
                  }

                  &::after {
                    background-color: transparent;
                  }
                }

                &.ant-picker-cell-today {
                  color: ${({ theme }) => theme.main};
                  .ant-picker-cell-inner:before {
                    border-color: ${({ theme }) => theme.main};
                  }
                }

                &.ant-picker-cell-selected {
                  .ant-picker-cell-inner {
                    /* background-color: ${({ theme }) => theme.main}; */
                  }
                }

                &.ant-picker-cell-disabled {
                  .ant-picker-cell-inner {
                    color: ${({ theme }) => theme.text.secondary};
                  }

                  &::before {
                    background-color: transparent;
                  }
                }
              }

              thead {
                font-size: 12px;
                th {
                  color: ${({ theme }) => theme.text.secondary};
                }
              }

              th {
                color: ${({ theme }) => theme.text.primary};
              }
            }
          }
        }

        .ant-picker-year-panel,
        .ant-picker-month-panel,
        .ant-picker-decade-panel {
          .ant-picker-body {
            padding: 25px 15px;

            .ant-picker-content {
              height: auto;

              .ant-picker-cell {
                padding: 5px;

                &,
                &.ant-picker-cell-in-view {
                  color: ${({ theme }) => theme.text.primary};

                  &::after {
                    border: none;
                  }
                }

                .ant-picker-cell-inner {
                  width: 100%;
                  height: 36px;
                  line-height: 36px;
                  border: 1px solid ${({ theme }) => theme.text.tertiary};
                }

                &:hover,
                &.ant-picker-cell-selected {
                  .ant-picker-cell-inner {
                    background-color: ${({ theme }) => theme.main};
                    border-color: transparent;
                  }
                }
              }
            }
          }
        }

        .ant-picker-footer {
          height: 40px;
          border-bottom: none;
          border-color: ${({ theme }) => theme.border.secondary};

          .ant-picker-today-btn {
            color: ${({ theme }) => theme.main};
          }
        }
      }
    }
  }
`;
const DatePickerStyle = createGlobalStyle `${datePickerStyle}`;
export default DatePickerStyle;
