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

/* Typography:
=======================================================================================*/
sub,
sup,
small {
  font-size: var(--text-font-size-xs);
  line-height: var(--text-line-height-xs);
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/* Description list
=======================================================================================*/
dt {
  font-weight: bold;
}

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

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

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'] {
  height: 4.2rem;
  padding: var(--space-000) var(--space-400);
}

input[type='text'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='file'],
input[type='search'],
input[type='range'],
textarea,
fieldset {
  box-shadow: inset 0 0 0 2px #e0e0e0;
}

/* Textarea styles */
textarea {
  padding: var(--space-400);
  height: calc(6em + 0.375em);
}

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

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

/* Select */
select {
  height: 1.875em;
}

/* 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:focus,
input[type='submit']:focus {
  box-shadow: inset 0 0 0 1px white;
}