/* eslint-disable @typescript-eslint/explicit-function-return-type */
import styled, { css } from 'styled-components';
export const Content = styled.div `
  width: 100%;
  height: 100%;

  --r2u-viewer-background-color: transparent;
  --r2u-viewer-box-shadow: 0px 2px 12px #f2f2f2;

  .viewer-container {
    width: 100%;
    height: 100%;

    background-color: var(--r2u-viewer-background-color);
    /* box-shadow: var(--r2u-viewer-box-shadow); */

    & > div {
      opacity: 1 !important;
      width: 100%;
      height: 100%;

      .expand-button {
        padding: 12px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 24px;
        z-index: 999999;
        cursor: pointer;
        background: none !important;
        border: none !important;
        outline: none;
        transition: opacity 2s;
        img {
          transition: 0.5s ease;
          width: 24px;
          height: 24px;
          backface-visibility: hidden;
        }
      }

      .expand-image {
        position: absolute;
        right: 0px;
        bottom: 0px;
      }

      .bloomButton {
        padding: 8px;
        position: absolute;
        left: 16px;
        right: auto !important;
        top: 4px;
        z-index: 9999999;
        background: #f9f9f9;
        ${({ bloom }) => bloom
    ? css `
                box-shadow: inset -2px -2px 4px #ffffff,
                  inset 2px 2px 4px rgba(86, 86, 86, 0.25);
              `
    : css `
                box-shadow: -2px -2px 4px #ffffff,
                  2px 2px 4px rgba(86, 86, 86, 0.25);
              `}
        border-radius: 20px;
        margin: 0px 10px;
        outline: none;
        border: none;
        cursor: pointer;

        :hover {
          box-shadow: inset -2px -2px 4px #ffffff,
            inset 2px 2px 4px rgba(86, 86, 86, 0.25);
        }

        .lamp {
          width: 30px;
          height: 30px;
        }
      }

      .exit-button {
        width: 26px;
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
        margin: 12px;
        padding: 3px;

        cursor: pointer;
        background: none !important;
        border: none !important;
        outline: none;
        img {
          width: 100%;
        }
      }
    }

    canvas {
      min-height: 220px;
    }
  }

  .background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.4);

    display: ${({ expanded }) => (expanded ? 'flex' : 'none')};
    justify-content: center;
    align-items: center;

    .popup {
      background-color: #fff;
      width: 60vw;
      height: 60vh;
      box-shadow: none;
    }
  }
`;
//# sourceMappingURL=styles.js.map