/* === Input widths === */
/* Extra small inputs: quantity, price, phone fragments */
.gm-input-xs {
    max-width: 16ch;
}

/* Small inputs: first name, last name, small codes */
.gm-input-sm {
    max-width: 28ch;
}

/* Medium input: email, project name, etc. */
.gm-input-md {
    max-width: 44ch;
}

/* Large inputs*/
.gm-input-lg {
    max-width: 56ch;
}

/* Large inputs*/
.gm-input-xl {
    max-width: 90ch;
}

/* Multi-line or text area inputs (description, notes, etc.) */
.gm-textarea-md {
    width: 100%;
    max-width: 72ch;
}

/* Makes sure they don't explode on tiny screens */
@media (max-width: 37.5rem) {
    .gm-input-xs,
    .gm-input-sm,
    .gm-input-md,
    .gm-input-lg,
    .gm-textarea-md {
        max-width: 100%;
    }
}

/* === Dialog widths === */
/* Extra small dialogs: confirm/alert dialogs */
.gm-dialog-xs {
    width: 100%;
    max-width: 22.5rem;
}

/* Small dialogs: rename, simple single-field forms */
.gm-dialog-sm {
    width: 100%;
    max-width: 30rem;
}

/* Medium dialogs */
.gm-dialog-md {
    width: 100%;
    max-width: 40rem;
}

/* Large dialogs: selector/search dialogs, table-in-dialog */
.gm-dialog-lg {
    width: 100%;
    max-width: 62.5rem;
}

/* Extra-large dialogs: layout editors, previews, special tools */
.gm-dialog-xl {
    width: 100%;
    max-width: 75rem;
}

/* Full-width on mobile, but still centered */
@media (max-width: 37.5rem) {
    .gm-dialog-xs,
    .gm-dialog-sm,
    .gm-dialog-md,
    .gm-dialog-lg,
    .gm-dialog-xl {
        max-width: 100%;
        margin: 0 0.5rem;
    }
}