/* Colors */
 
 :root
 {
   --white: #fff;
   --gray-lightest: #eee;
   --gray-light: #ccc;
   --gray-dark: #444;
   --gray-darkest: #222;
   --black: #000;
   
   --text-strong: var(--black);
   --text: var(--gray-darkest);
   --text-subtle: var(--gray-dark);
   
   --bg-subtle: var(--gray-light);
   --bg: var(--gray-lightest);
   --bg-strong: var(--white);
 }
 
 @media (prefers-color-scheme: dark)
 {
   :root
   {
      --text-strong: var(--white);
      --text: var(--gray-lightest);
      --text-subtle: var(--gray-light);
      
      --bg-subtle: var(--gray-dark);
      --bg: var(--gray-darkest);
      --bg-strong: var(--black);
   }
 }
 
 /* Inline */

.control-group.inline,
.form-group.inline,
.form-group.inline .control-group
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
}

.control-group.inline .label
{
  flex: 1 0 auto;
}

.control-group.inline .control
{
  flex: 0 1 auto;
}

/* Stacked */

.control-group,
.form-group,
.form-group.stacked,
.form-group.inline .control-group.stacked
{
  display: grid;
  gap: 0.25em;
  align-items: end;
}

.control-group .label,
.control-group .control
{
  position: relative;
}

.control-group .label,
.control-group.stacked .label
{
  font-size: 0.85em;
  color: var(--text-subtle);
}

/* Allow positioning tweaks via classes */

.top
{
  align-self: start;
}

.end
{
  justify-self: end;
}

.bottom
{
  align-self: end;
}

.start
{
  justify-self: start;
}

.center
{
  justify-self: center;
}

.middle
{
  align-self: center;
}

/* Generic form elements */

.control-group .control
{
  font-size: 1em;
}

div.control-group .control input,
div.control-group .control select,
div.control-group .control textarea,
.control input,
.control select,
.control textarea,
.control button
{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  background-color: var(--bg-strong);
  color: var(--text-strong);
  border: 0.1em solid var(--bg-subtle);
  border-radius: 0.4em;
}

div.control-group .control input:disabled,
div.control-group .control select:disabled,
div.control-group .control textarea:disabled,
div.control-group .control button:disabled
{
    color: var(--bg-subtle);
    cursor: not-allowed !important;
    opacity: 0.8;
}

div.control-group .control input,
div.control-group .control select,
div.control-group .control textarea,
.control input,
.control select,
.control textarea
{
  width: 100%;
}

div.control-group .control.with-errors input,
div.control-group .control.with-errors select,
div.control-group .control.with-errors textarea,
.control.with-errors input,
.control.with-errors select,
.control.with-errors textarea
{
  border-color: var(--red);
}

.control-group .helptext
{
  font-size: 0.5em;
  margin: 0.25em 0;
  grid-column: 1;
  line-height: 1.3;
  color: var(--text-subtle);
}

.control-group .helptext ul
{
    font-size: 0.85em;
    margin: 0 0 1em 0;
}

/* Text */
div.control-group .control input,
div.control-group .control textarea,
.control input,
.control textarea
{
  font-family: mono, monospace;
}

/* Radio and Checkbox */ 
.control-group.radio,
.control-group.checkbox
{
  grid-template-columns: auto 1fr;
  align-items: start;
}

.control-group.radio .label,
.control-group.checkbox .label,
.control-group.control-first .label
{
  order: 2;
  line-height: 1.295em;
}

.control-group.radio .label,
.control-group.checkbox .label,
.inline .label
{
  font-size: 1em;
}
      
div.control-group.radio input,
div.control-group.checkbox input,
.control-group.radio input,
.control-group.checkbox input
{
  height: 1em;
  width: 1em;
  padding: 0;
  border: 0.1em solid var(--bg-subtle);
  background-color: var(--bg-strong);
  position: relative;
}

div.control-group.checkbox input,
.control-group.checkbox input
{
  border-radius: 0.2em;
}

.control-group.radio input::after,
.control-group.checkbox input::before,
.control-group.checkbox input::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: .5em;
  width: .5em;
  transform: translate(-50%, -50%);
  background-color: var(--text-subtle);
  opacity: 0;
}

.control-group.radio input:checked::after,
.control-group.checkbox input:checked::before,
.control-group.checkbox input:checked::after
{
  opacity: 1;
}

div.control-group.radio input,
div.control-group.radio input:checked:after,
.control-group.radio input,
.control-group.radio input:checked:after
{
  border-radius: 100%;
}

.control-group.checkbox input:checked:before,
.control-group.checkbox input:checked:after
{
  height: .2em;
  width: .8em;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 0.2em;
}

.control-group.checkbox input:checked:after
{
  transform: translate(-50%, -50%) rotate(-45deg) ;
}

/* Button */

.control-group .control.button button,
.control-group .control.button input,
.control.button button,
.control.button input
{
  background-color: var(--text);
  color: var(--bg-strong);
  border-color: var(--bg-strong);
  font-weight: 700;
  padding: 0.5em 1em;
  font-family: inherit;
  width: unset;
}

/* Select/dropdown */

.control-group.select select
{
  padding: 0.5em 2em 0.5em .5em;
  border: 0.1em solid var(--bg-subtle);
}

.control-group.select .control::after
{
  content: "";
  position: absolute;
  height: 1em;
  width: 1em;
  top: 50%;
  left: 100%;
  transform: translate(-125%, -40%);
  background-color: var(--text-strong);
  pointer-events: none;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0.514in" height="0.319in"><path fill-rule="evenodd" d="M20.022,21.778 C20.464,21.602 20.880,21.338 21.238,20.980 L35.622,6.595 C37.031,5.186 37.031,2.902 35.622,1.494 L35.532,1.403 C34.123,-0.005 31.839,-0.005 30.431,1.403 L18.609,13.623 L7.088,1.881 C5.679,0.472 3.395,0.472 1.986,1.881 C0.578,3.290 0.578,5.574 1.986,6.983 L16.033,21.029 C17.112,22.108 18.702,22.353 20.022,21.778 Z"/></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

/* File Chooser */

.control-group.file .control
{
  display: grid;
  place-content: center;
  border: 0.2em dashed var(--bg-subtle);
  background-color: var(--bg-strong);
  padding: 0.5em;
  border-radius: 0.5em;
}

.control-group.file .control input
{
  border: 0;
  background: inherit;
}

.control-group.file .control input::after
{
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}


/* .control-group.file
{
  border: 0.125em dashed var(--bg-subtle);
  border-radius: 0.4em;
  padding: 1em;
  display: inline-grid;
  place-items: center;
  background: var(--bg-strong);
  position: relative;
}

.control-group.file .label
{
  position: unset;
}

.control-group.file label
{
  background-color: var(--text);
  color: var(--bg-strong);
  border-color: var(--bg-strong);
  font-weight: 700;
  border-radius: 0.4em;
  padding: 0.25em 1em;
}

.control-group.file label::after
{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.control-group.file input
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
} */

/* Address Form */

.form-group.address
{
  grid-template-columns: repeat(12, 1fr);
}

.form-group.address .control-group
{
  grid-column: 1 / span 12;
}

.form-group.address .control-group.city,
.form-group.address .control-group.city
{
  grid-column: 1 / span 7;
}

.form-group.address .control-group.state,
.form-group.address .control-group.state
{
  grid-column: 8 / span 5;
}

.form-group.address .control-group.zip,
.form-group.address .control-group.zip
{
  grid-column: 1 / span 5;
}

.form-group.address .control-group.country,
.form-group.address .control-group.country
{
  grid-column: 6 / span 7;
}

/* Catalog Assets */

.form-group.catalog-assets
{
  justify-self: stretch;
  margin: 1em 0;
}

.form-group.catalog-assets .control-group
{
  grid-template-columns: 1fr 4fr 1fr;
  align-items: center;
  column-gap: 0.5em;
}

.form-group.catalog-assets .control-group .label
{
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.form-group.catalog-assets .control-group .control
{
  grid-column: 2;
  grid-row: 1;
}

.form-group.catalog-assets .control-group .helptext
{
  grid-column: 2;
  grid-row: 2;
}

.form-group.catalog-assets.required .control-group::after
{
  content: "REQUIRED";
  display: block;
  grid-column: 3;
  grid-row: 1;
  background-color: var(--text-subtle);
  color: var(--bg-strong);
  padding: 0.25em .5em;
  border-radius: 0.4em;
  font-size: 0.85em;
  font-weight: bold;
  justify-self: start;
}