/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   LOREM IPSUM GENERATOR
   ================================================================== */

.jp-lorem-generator {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.7fr)
    minmax(0, 1.3fr);

  gap: var(--jp-space-6);
}

/* ==================================================================
   PANELS
   ================================================================== */

.jp-lorem-options-panel,
.jp-lorem-output-panel {
  min-width: 0;

  padding: var(--jp-space-5);

  box-shadow: var(--jp-shadow-sm);
}

.jp-lorem-output-panel {
  display: flex;
  flex-direction: column;
}

/* ==================================================================
   OPTION FIELDS
   ================================================================== */

.jp-lorem-field {
  margin-bottom: var(--jp-space-5);
}

.jp-lorem-field-hint {
  margin: var(--jp-space-2) 0 0;

  color: var(--jp-text-soft);

  font-size: var(--jp-text-sm);
}

/* ==================================================================
   CHECKBOX
   ================================================================== */

.jp-lorem-checkbox {
  display: flex;
  align-items: flex-start;

  gap: var(--jp-space-3);

  padding: var(--jp-space-4);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);

  background: var(--jp-surface);

  cursor: pointer;

  transition:
    border-color var(--jp-transition-fast),
    background-color var(--jp-transition-fast);
}

.jp-lorem-checkbox:hover {
  border-color: var(--jp-border-strong);

  background: var(--jp-surface-hover);
}

.jp-lorem-checkbox input {
  flex-shrink: 0;

  width: 17px;
  height: 17px;

  margin-top: 0.2rem;

  accent-color: var(--jp-primary);

  cursor: pointer;
}

.jp-lorem-checkbox span {
  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-medium);
  line-height: var(--jp-leading-normal);
}

/* ==================================================================
   GENERATE BUTTON
   ================================================================== */

.jp-lorem-generate-button {
  width: 100%;

  margin-top: var(--jp-space-5);

  padding: 0.9rem 1rem;
}

/* ==================================================================
   OUTPUT ACTIONS
   ================================================================== */

.jp-lorem-output-actions {
  display: flex;
  flex-wrap: wrap;

  gap: var(--jp-space-2);
}

/* ==================================================================
   OUTPUT
   ================================================================== */

.jp-lorem-output {
  flex: 1;

  min-height: clamp(280px, 38vh, 430px);

  resize: vertical;

  line-height: var(--jp-leading-relaxed);
}

/* ==================================================================
   STATUS
   ================================================================== */

.jp-lorem-status {
  margin-top: var(--jp-space-4);
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 900px) {
  .jp-lorem-generator {
    grid-template-columns: 1fr;
  }

  .jp-lorem-output {
    min-height: 260px;
  }
}

/* ==================================================================
   MOBILE
   ================================================================== */

@media (max-width: 550px) {
  .jp-lorem-output-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  .jp-lorem-output-actions .jp-tool-button {
    width: 100%;
  }

  .jp-lorem-output {
    min-height: 220px;
  }
}