/* Password Generator */

/* The password: text, not a field, so the box grows to fit it. Large enough to read character by character, and
   broken anywhere so a long one wraps. While an error shows it is empty, and keeps the height of one line */
#pg_output {
    min-height: calc(1.5rem * 1.5 + 2rem + 2 * var(--bs-border-width));
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    word-break: break-all;
}

.pg-strength {
    flex: 1 1 12rem;
    max-width: 20rem;
}

.pg-strength .progress {
    height: 6px;
}

/* Number fields without the browser's up/down buttons, as on the calculators (tool.css scopes its own rule to
   .tool-calculator, which a code tool isn't inside) */
#pg_tool input[type="number"]::-webkit-outer-spin-button,
#pg_tool input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#pg_tool input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pg-number {
    width: 5.5rem;
    flex-shrink: 0;
}

#pg_tool .form-switch {
    margin-bottom: 0.5rem;
}

#pg_tool .form-switch .form-check-input {
    cursor: pointer;
}

#pg_tool .form-check-label .font-monospace {
    margin-left: 0.25rem;
}