<template>
  <div class="printer-popup-container">
    <pdf-print is-popup />
  </div>
</template>

<script>
import PdfPrint from '@/vue/components/Pdf/Print.vue';

export default {
  name: 'PrinterPDF',
  components: {
    'pdf-print': PdfPrint,
  },
};
</script>

<style lang="scss" scoped>
  .printer-popup-container {
    background: #f5f7fa;

    :deep(.config-card) {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    :deep(.template-buttons) {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 4px;

      .template-button {
        height: 28px;
        font-size: 12px;
        border-radius: 4px;

        i {
          font-size: 12px;
          margin-right: 4px;
        }

        &:deep(.ivu-btn) {
          height: 28px;
          line-height: 28px;
          padding: 0 10px;
          font-size: 12px;
          border-radius: 4px;
        }
      }
    }

    :deep(.config-section) {
      padding: 10px;
    }

    :deep(.section-header) {
      margin-bottom: 6px;

      .section-title {
        font-size: 12px;
      }
    }

    :deep(.config-options) {
      gap: 8px;
      margin-bottom: 6px;

      .option-item {
        :deep(.ivu-checkbox-wrapper) {
          font-size: 12px;
        }

        .option-label {
          font-size: 12px;
        }
      }
    }

    :deep(.field-group) {
      .field-label {
        font-size: 11px;
        margin-bottom: 4px;
      }
    }

    /* Compact inputs/selects/numbers for small space */
    :deep(.ivu-input),
    :deep(.ivu-select-selection),
    :deep(.ivu-input-number),
    :deep(.ivu-input-number-input) {
      height: 30px;
      min-height: 30px;
      font-size: 12px;
      border-radius: 4px;
    }

    :deep(.ivu-input) {
      padding: 0 8px;
    }

    :deep(.ivu-select-selection) {
      padding: 0 8px;
    }

    :deep(.ivu-select-selection .ivu-select-selected-value) {
      line-height: 30px;
      height: 30px;
      font-size: 12px;
    }

    :deep(.ivu-input-number) {
      width: 100%;
    }

    :deep(.ivu-input-number-input) {
      height: 28px;
      line-height: 28px;
      font-size: 12px;
    }

    /* Upload area compact */
    :deep(.upload-section .upload-content) {
      padding: 24px 12px;
    }

    :deep(.upload-section .upload-icon) {
      transform: scale(0.9);
    }

    :deep(.upload-section .upload-text) {
      font-size: 14px;
    }

    :deep(.upload-section .upload-hint) {
      font-size: 11px;
    }

    :deep(.template-footer) {
      padding-top: 12px;

      .create-template-link {
        font-size: 12px;
      }

      .option-label {
        font-size: 12px;
      }
    }
  }

  @media (max-width: 480px) {
    .printer-popup-container {
      :deep(.template-buttons) {
        grid-template-columns: 1fr !important;
      }

      :deep(.config-fields) {
        .ivu-col {
          margin-bottom: 8px;
        }
      }
    }
  }
</style>
