book css

@import "../../../scss/abstracts/variables";

/*

1 cm és 0.5 cm-es padding-ek %-ban

Portrait  21.0 x 29.7
Square    21.0 x 21.0
Landscape 29.7 x 21.0

14.8 -> image-padding: 3,3783784%
21.0 -> image-padding: 2,3809524%
29.4 -> image-padding: 1,7006803%
29.7 -> image-padding: 1,6835017%

*/

.book {
  display: flex;
  align-items: center;
  flex-direction: column;

  .pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    width: calc(2 * 166px);

    .page {
      text-align: center;
      font-size: 0.875rem;
      margin-bottom: 1rem;

      .custom-placeholder {
        background: #ccc;
        border: dotted 3px #999;
        min-height: 60px;
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      }

      .layout-holder {
        width: 100%;
        height: 100%;

        .preview {
          position: relative;
          width: 166px;
          height: 166px;
          margin-bottom: 5px;
          border-width: 2px;
          border-color: rgb(183, 183, 183);
          border-style: solid;
          border-radius: 3px;
          background-origin: content-box;
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          flex-wrap: wrap;

          .layout-element {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;

            span.text {
              position: absolute;
              left: 0;
              top: 0;
              border-radius: 8px;
              user-select: none;
              white-space: pre;
            }
          }

          .controls {
            top: 50%;
            bottom: inherit;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            position: absolute;

            a {
              color: #ffffff;
              border: 1px solid #ffffff;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 1px;
            }
          }
        }
      }

      &:not(.cover) {
        &:nth-child(1) {
          .preview {
            border-width: 2px 1px 2px 2px;
            border-radius: 3px 0 0 3px;
          }
        }

        &:nth-child(2) {
          .preview {
            border-width: 2px 2px 2px 1px;
            border-radius: 0 3px 3px 0;
          }
        }
      }
    }

    .page-controls {
      position: absolute;
      z-index: 2;

      a {
        padding: 0.5rem;
        margin: 2px;
        line-height: 0;
        font-weight: normal;
        background: #ffffff;
        color: $light-grey;
        border: 1px solid $light-grey;
      }
    }
  }

  .controls {
    position: absolute;
    display: none;
    bottom: 0.5rem;

    a {
      padding: 0.5rem;
      margin: 2px;
      line-height: 0;
      font-weight: normal;
      background: #ffffff;
      color: $light-grey;
      border: 1px solid $light-grey;
    }
  }

  &.editing {
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .pages {
      .page-controls {
        display: flex;
      }
    }

    &.page-view {
      .controls {
        position: relative;
      }
    }
  }

  &.square {
    .pages {
      width: calc(2 * 166px);

      .page {
        .layout-holder {
          .preview {
            width: 166px;
            height: 166px;
            padding: calc(2.3809524% / 2);

            .layout-item {
              padding: calc(2.3809524% / 2);
            }
          }
        }
      }

      .page-controls {
        transform: translate(calc(166.5px - 50%), 150px);
      }
    }

    &.page-view {
      .pages {
        width: min(100vw, 600px);
        height: min(100vw, 600px);

        .page {
          width: min(100vw, 600px);
          height: min(100vw, 600px);

          .layout-holder {
            .preview {
              width: 100%;
              height: 100%;
              padding: calc(2.3809524% / 2);

              .layout-item {
                padding: calc(2.3809524% / 2);
              }
            }
          }
        }
      }
    }
  }

  &.landscape {
    .pages {
      width: calc(2 * 166px);

      .page {
        .layout-holder {
          .preview {
            width: 166px;
            height: 117.3px;
            padding: calc(1.6835017% / 2);

            .layout-item {
              padding: calc(1.6835017% / 2);
            }
          }
        }
      }

      .page-controls {
        transform: translate(calc(166.5px - 50%), 101.3px);
      }
    }

    &.page-view {
      .pages {
        width: min(100vw, 600px);
        height: min(100vw, 600px);

        .page {
          width: min(100vw, 600px);
          height: min(100vw, 600px);
          padding-bottom: 29.292929292%;

          .layout-holder {
            .preview {
              width: 100%;
              height: 100%;
              padding: calc(1.6835017% / 2);

              .layout-item {
                padding: calc(1.6835017% / 2);
              }
            }
          }
        }
      }
    }
  }

  &.portrait {
    .pages {
      width: calc(2 * 166px);

      .page {
        .layout-holder {
          .preview {
            width: 166px;
            height: 235px;
            padding: calc(2.3809524% / 2);

            .layout-item {
              padding: calc(2.3809524% / 2);
            }
          }
        }
      }


      .page-controls {
        transform: translate(calc(166.5px - 50%), 219px);
      }
    }

    &.page-view {
      .pages {
        width: min(100vw, 600px);
        height: min(100vw, 600px);

        .page {
          width: min(100vw, 600px);
          height: min(100vw, 600px);
          padding: 0 calc(29.292929292% / 2);

          .layout-holder {
            .preview {
              width: 100%;
              height: 100%;
              padding: calc(2.3809524% / 2);

              .layout-item {
                padding: calc(2.3809524% / 2);
              }
            }
          }
        }
      }
    }
  }
}