src/components/PageRedactionModal/PageRedactionModal.scss
@import '../../constants/styles';
@import '../../constants/modal';

.PageRedactionModal {
  @extend %modal;

  .modal-container {
    align-items: center;
    background: var(--component-background);
    width: 888px;

    @include tablet {
      width: 480px;
    }

    @include mobile {
      width: 100%;
    }

    .body {
      padding: 16px;
      gap: 16px;
      display: flex;
      width: 100%;

      @include mobile {
        display: flex;
        gap: 5px;
        flex-direction: column;
      }

      .canvas-container {
        border: 1px solid var(--lighter-border);
        background-color: var(--file-preview-background);
        height: 448px;
        width: 60%;

        @include tablet {
          width: 55%;
          height: 300px;
        }

        @include mobile {
          width: 100%;
          height: 250px;
        }

        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        overflow: auto;
        gap: 5px;

        canvas {
          box-shadow: 0px 0px 3px 0px var(--box-shadow);
        }
      }

      .selection-options {
        @include mobile {
          width: 100%;
        }

        width: 40%;
        gap: 12px;
        display: flex;
        flex-direction: column;

        fieldset {
          border: 0;
          padding: 0;
          margin: 0;
          min-width: 0;
          display: grid;
          gap: 12px;
        }

        legend {
          padding: 0;
          margin-bottom: 12px;
        }

        .page-number-input-container {
          width: 100%;
          margin-top: 8px;

          .PageNumberInput {
            height: 54px;

            .page-number-input {
              height: 32px;
              width: 100%;
              align-self: flex-end;
            }
          }
        }

        .ui__choice--disabled {
          text-decoration: line-through;
        }

        .ui__choice {
          font-size: 13px;
          margin: 0;

          &.specify-pages-choice {
            &.ui__choice--checked {
              align-items: baseline;
              height: 75px;

              .ui__choice__label {
                width: 100%;
                position: relative;
                inset-block-start: -2px;
              }
            }
          }

          .specifyPagesChoiceLabel {
            display: flex;

            .specifyPagesExampleLabel {
              margin-inline-start: 4px;
              color: var(--faded-text);
            }
          }
        }
      }
    }

    .footer {
      margin-top: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 16px;
      border-top: 1px solid var(--divider);

      .Button {
        margin-top: 0;
        height: 32px;

        @include mobile {
          padding: 8px 16px !important; // To Override the padding in modal class
        }
      }
    }
  }
}
