/**
 * F1CSS - Form - 05 Oct 2022
 *  
 * @author  C. Moller <xavier.tnc@gmail.com>
 * 
 * @version 3.0.0 - DEV - 29 Dec 2022
 *   - Adjust --form-spacing to 0.67rem
 *   - Adjust .input and .summary padding
 *   - Move to F1CSS root dir. 
 */

form {
  --form-color-error: crimson;
  --form-color-error-darkmode: #c81234;
  --form-spacing: 0.67rem;
}

form,
.form-rows {
  gap: var(--form-spacing);
  flex-direction: column;
  display: flex;
}

.form-row {
  gap: var(--form-spacing);
  flex-wrap: wrap;
  display: flex;
}

.field {
  position: relative;
  flex-wrap: wrap;
  display: flex;
  gap: 3px;
  flex: 1;
}

.field > label {
  position: relative;
  font-size: 0.8em;
  flex-basis: 65px;
}

.field.required > label::after {
  color: var(--form-color-error);
  display: inline-block;
  margin-left: 0.15em;
  content: '*';
}

.field.unhappy {
  color: var(--form-color-error);
}

.field.unhappy .input,
.field.unhappy fieldset {
  border-color: var(--form-color-error);
}

.field.unhappy .input:focus,
.field.unhappy .input:focus-visible {
  box-shadow: 0 0 0 3px rgb(255 108 108 / 50%);
}

.select {
  flex: 1;
}

.input {
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  line-height: 1;
}

.input:focus,
.input:focus-visible {
  border-color: #0a58ca;
  box-shadow: 0 0 0 3px rgba(49,132,253,.5);        
  outline: 0;
}

.errors {
  color: var(--form-color-error);
}

.error {
  padding-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1em;
  text-overflow: ellipsis;
}

.errors.summary {
  color: darkred;
  background-color: pink;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.25rem;
  padding: 0.34rem 0.67rem;
  height: auto;
}


/*
 DARK THEME
.dark {
  background-color: #222;
}
.dark .card {
  background-color: ghostwhite;
}
.dark #title {
  margin-top: 0;
}
.dark .status-bar {
  background-color: inherit;
  display: none;
}
.dark :is(.unhappy, .modified) .status-bar {
  display: block;
  height: auto;
  margin-bottom: 1em;
  color: var(--error-color-dark);
}
.field.unhappy {
  color: var(--error-color-dark);
}
.dark .show-if-unhappy {
  background-color: var(--error-color-dark);
}
.dark .field.unhappy .input {
  border-color: var(--error-color-dark);
}
.dark .status-bar .messages {
  margin-bottom: 0.3em;
}

.card {
  word-wrap: break-word;
  background-color: white;
  border: 0 solid rgba(0,0,0,.125);
  border-radius: .35rem;
  box-shadow: 0 2px 3px rgba(0,0,0,.16);
  min-width: 230px;
  padding:  0.67rem;
  position: relative;
  margin: 0 1rem;
}
*/