import { createGlobalStyle, css } from 'styled-components';
const modalStyle = css `
  .ant-modal {
    .ant-modal-content {
      background-color: ${({ theme }) => theme.background.modal};

      .ant-modal-close {
        color: ${({ theme }) => theme.text.secondary};

        .anticon.anticon-close.ant-modal-close-icon {
          font-size: 14px;
          position: absolute;
          top: 17px;
          right: 17px;
        }
      }

      .ant-modal-header {
        text-align: center;
        background-color: ${({ theme }) => theme.background.modal};
        border-bottom: none;
        padding: 30px;

        .ant-modal-title {
          color: ${({ theme }) => theme.text.primary};
          font-weight: bold;
          font-size: 20px;
        }
      }

      .ant-modal-body {
        padding: 0 20px 30px;
      }

      .ant-modal-footer {
        text-align: center;
        border-top: none;
        padding: 0 30px 30px;
      }
    }

    &.ant-modal-confirm {
      .ant-modal-content {
        .ant-modal-body {
          padding: 30px;

          .ant-modal-confirm-body-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            .ant-modal-confirm-body {
              .anticon {
                float: none;
                display: none;
                margin-right: 6px;
                vertical-align: middle;

                &:not(.ant-modal-confirm-without-title *) {
                  display: inline;
                }
              }

              .ant-modal-confirm-title {
                display: inline;
                vertical-align: middle;
                font-size: 18px;
                font-weight: bold;
                line-height: 30px;
              }

              .ant-modal-confirm-title,
              .ant-modal-confirm-content {
                color: ${({ theme }) => theme.text.primary};
              }

              .ant-modal-confirm-content {
                margin-left: 0;
              }
            }

            .ant-modal-confirm-btns {
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
`;
const ModalStyle = createGlobalStyle `${modalStyle}`;
export default ModalStyle;
