/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   PASSWORD GENERATOR
   ================================================================== */

.jp-password-generator {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.8fr);

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

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

.jp-password-output-panel,
.jp-password-options-panel {
  padding: var(--jp-space-5);

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

  background: var(--jp-surface);

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

.jp-password-output-panel h2,
.jp-password-options-panel h2 {
  margin-top: 0;
}

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

.jp-password-output-header {
  margin-bottom: var(--jp-space-5);
}

.jp-password-output-header h2 {
  margin-bottom: var(--jp-space-1);
}

.jp-password-output-header p {
  margin-bottom: 0;
}

.jp-password-output-row {
  display: flex;

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

.jp-password-output {
  flex: 1;

  min-width: 0;

  font-family: var(--jp-font-mono);
}

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

.jp-password-status {
  min-height: 1.5rem;

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

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

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

.jp-password-status.is-success {
  color: var(--jp-success);

  font-weight: var(--jp-weight-semibold);
}

.jp-password-status.is-error {
  color: var(--jp-danger);

  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   LENGTH
   ================================================================== */

.jp-password-length-section {
  margin: var(--jp-space-5) 0;
}

.jp-password-option-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

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

  margin-bottom: var(--jp-space-3);

  font-weight: var(--jp-weight-semibold);
}

.jp-password-length-value {
  min-width: 2rem;

  color: var(--jp-primary);

  text-align: center;

  font-family: var(--jp-font-mono);
  font-weight: var(--jp-weight-bold);
}

.jp-password-length-slider {
  width: 100%;

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

  cursor: pointer;
}

/* ==================================================================
   CHARACTER OPTIONS
   ================================================================== */

.jp-password-character-options {
  display: grid;

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

.jp-password-checkbox {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

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

  padding: 0.85rem 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-password-checkbox:hover {
  border-color: var(--jp-border-strong);

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

.jp-password-checkbox input {
  width: 17px;
  height: 17px;

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

  cursor: pointer;
}

.jp-password-checkbox span {
  font-weight: var(--jp-weight-medium);
}

.jp-password-checkbox small {
  color: var(--jp-text-soft);

  font-family: var(--jp-font-mono);
}

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

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

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

  padding: 0.9rem 1rem;
}

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

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

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

@media (max-width: 550px) {
  .jp-password-output-row {
    flex-direction: column;
  }

  .jp-password-output-row .jp-tool-button {
    width: 100%;
  }

  .jp-password-checkbox {
    grid-template-columns:
      auto
      1fr;
  }

  .jp-password-checkbox small {
    display: none;
  }
}