/* ==================== */
/*   __  __ _   _ ___   */
/*  |  \/  | | | |_ _|  */
/*  | |\/| | | | || |   */
/*  | |  | | |_| || |   */
/*  |_|  |_|\___/|___|  */
/*                      */
/*   michael.ui.system  */
/* ==================== */

/* Formalize:
=======================================================================================*/

label {
  margin-bottom: var(--space-100);
}
input,
textarea {
  border-radius: var(--radius-100);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="search"],
input[type="range"],
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
textarea,
fieldset {
  border: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="range"],
select {
  min-height: 4.4rem;
  padding: var(--space-200) var(--space-300);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="search"],
input[type="range"],
textarea,
fieldset {
  border: var(--border-thin);
}

/* Textarea styles */
textarea {
  padding: var(--space-300);
  height: var(--space-800);
}

/* Legend */
legend {
  padding: var(--space-000) var(--space-200);
  margin-left: calc(-1 * var(--space-200));
}

/* Fieldset styles & File Upload style */
fieldset {
  border-radius: var(--radius-100);
  padding: var(--space-300) var(--space-500);
}
fieldset ul {
  list-style: none;
  padding: var(--space-000);
  margin: var(--space-000);
}

fieldset label,
fieldset ul label {
  margin-bottom: var(--space-000);
  display: flex;
}
fieldset li,
fieldset label {
  margin-bottom: var(--space-200);
}

/* Radio & Checklist Styles */
input[type="checkbox"],
input[type="radio"] {
  margin: 0 var(--space-200) 0 0;
}

input[type="file"] {
  font-size: var(--text-font-size-xs);
  padding: var(--space-400);
  margin-bottom: var(--space-500);
}

button[type="submit"] {
  padding: var(--action-padding);
  border-radius: var(--radius-100);
  border: var(--border-thick);
}
