import { css, Global } from '@emotion/react';
import React from 'react';
import useSiteToken from '../../../hooks/useSiteToken';

export default () => {
  const { token } = useSiteToken();

  return (
    <Global
      styles={css`
          .preview-image-boxes {
            display: flex;
            float: right;
            clear: both;
            width: 496px;
            margin: 0 0 70px 64px;

            &-with-carousel {
              width: 420px;

              .preview-image-box img {
                padding: 0;
              }
            }

            .ant-row-rtl & {
              float: left;
              margin: 0 64px 70px 0;
            }
          }

          .preview-image-boxes + .preview-image-boxes {
            margin-top: -35px;
          }

          .preview-image-box {
            float: left;
            width: 100%;
          }

          .preview-image-box + .preview-image-box {
            margin-left: 24px;

            .ant-row-rtl & {
              margin-right: 24px;
              margin-left: 0;
            }
          }

          .preview-image-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
            padding: 16px;
            text-align: center;
            background: #f2f4f5;
          }

          .preview-image-wrapper.video {
            display: block;
            padding: 0;
            background: 0;
          }

          .preview-image-wrapper video {
            display: block;
            width: 100%;

            + svg {
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .preview-image-wrapper.good::after {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 3px;
            background: ${token.colorPrimary};
            content: '';
          }

          .preview-image-wrapper.bad::after {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 3px;
            background: ${token.colorError};
            content: '';
          }

          .preview-image-title {
            margin-top: 20px;
            color: ${token.colorText};
            font-size: 12px;
          }

          .preview-image-description {
            margin-top: 2px;
            color: ${token.colorTextSecondary};
            font-size: 12px;
            line-height: 1.5;
          }

          .preview-image-description hr {
            margin: 2px 0;
            background: none;
            border: 0;
          }

          .preview-image-box img {
            max-width: 100%;
            padding: 12px;
            background: ${token.colorBgContainer};
            border-radius: ${token.borderRadius}px;
            cursor: pointer;
            transition: all 0.3s;

            &.no-padding {
              padding: 0;
              background: none;
            }
          }

          .preview-image-boxes.preview-image-boxes-with-carousel img {
            padding: 0;
            box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd,
              0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd;
          }

          .preview-image-box img:hover {
            box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
          }

          .preview-img {
            float: right;
            clear: both;
            max-width: 496px !important;
            margin: 0 0 70px 64px;
            padding: 16px;
            background-color: #f2f4f5;
          }

          .image-modal {
            text-align: center;

            &-container {
              position: relative;
              text-align: center;
            }

            .ant-carousel {
              .slick-slider {
                padding-bottom: 24px;

                img {
                  display: inline;
                  max-width: 100%;
                }
              }

              .slick-dots {
                bottom: 4px;

                li button {
                  background: #888;
                }
              }
            }

            .image-modal-single.slick-slider {
              padding-bottom: 0;
            }

            .image-modal-single .slick-dots {
              display: none !important;
            }
          }

          .transition-video-player,
          .motion-video-min {
            float: right;
            width: 600px;
            padding: 0 0 70px 20px;

            .preview-image-wrapper {
              padding: 0;
            }

            .ant-row-rtl & {
              float: left;
            }
          }

          .motion-video-min {
            width: 390px;
          }

          .motion-principle-wrapper {
            width: 100%;
            max-width: 900px;
            margin: 48px 0 24px;
          }

          .principle-wrapper {
            width: 100%;

            .principle {
              display: inline-block;
              box-sizing: border-box;
              width: 100%;
              min-height: 180px;
              margin-right: 12.5%;
              margin-bottom: 24px;
              padding: 24px;
              font-size: 24px;
              text-align: center;
              border: 1px solid #e8e8e8;
              border-radius: 4px;

              &:last-child {
                margin-right: 0;
              }

              h4 {
                margin: 16px 0 8px;
              }

              p {
                font-size: 12px;
                line-height: 24px;
              }
            }
          }
        `}
    />
  );
};
