@import './root.css';
:root {
    --primary-color: #F080B2;
    --base-padding:16px;
    --border-color:#dddddd;
    --card-height:630px;
    --card-width:300px;
    --border-radios:6px;
    --box-shadow:2px 2px 6px rgba(0,0,0,0.1);
    --text-color:#646464;
}


 /* preview  */
 .preview_container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--base-padding);

 }

 .preview_section {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   height: 100vh;
   display: none;
 }


 .preview_actions button,
 .preview_container button {
   padding: 0.6rem;
   border-radius: var(--border-radios);
   border: none;
   font-size: 0.8rem;
   color: var(--primary-color);
   cursor: pointer;
   font-weight: 600;

 }

 .preview_actions_button_container button {
   border: 1px solid var(--primary-color);
   background-color: #f8f9fa;
 }

 .preview_container button {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   box-shadow: var(--box-shadow);
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #999999;
   font-size: 1rem;
   background: #fff;
 }

 .preview_container button:hover {
   background: var(--primary-color);
   color: #fff;
 }

 .preview_container {
   flex-grow: 1;
   background-color: #f8f9fa;
 }

 .book-section {
   height: 100%;
   width: 100%;
   text-align: center;
   display: flex;
   align-items: center;

 }

 .book-section>.container {
   height: 650px;
   width: 1000px;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   border-radius: var(--border-radios);
   perspective: 1200px;
   /* box-shadow: var(--box-shadow); */
   border: 1px dotted var(--border-color);
   background-color: #fff;
 }

 .container>.right {
   position: absolute;
   height: 100%;
   width: 50%;
   transition: 0.7s ease-in-out;
   transform-style: preserve-3d;
 }

 .book-section>.container>.right {
   right: 0;
   transform-origin: left;
   border-radius: 10px 0 0 10px;
 }

 .right>figure.front,
 .right>figure.back {
   margin: 0;
   height: 100%;
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   background-size: 100%;
   background-repeat: no-repeat;
   backface-visibility: hidden;
   background-color: white;
   overflow: hidden;
 }

 .right>figure.front {
   background-position: right;
   border-radius: 0 10px 10px 0;
   box-shadow: var(--box-shadow);
 }

 .right>figure.back {
   background-position: left;
   border-radius: 10px 0 0 10px;
   box-shadow: var(--box-shadow);
   transform: rotateY(180deg);
 }

 .flip {
   transform: rotateY(-180deg);
 }

 .flip::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
   width: 100%;
   height: 100%;
   border-radius: 0 10px 10px 0;
   background-color: rgba(110, 110, 110, 0.1);
 }

 figure canvas.preview-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   /* Prevent interfering with clicks */
 }