/*
 * All CSS in this file is scoped to the #analyze-form-aside ID.
 */

#analyze-form-aside {
  /* Position is fixed so aside stays visible, even when scrolling down.  */
  position: fixed;
  top: var(--page-header-height);
  bottom: 0;
  left: 0;
  width: var(--analyze-form-aside-width);

  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 24px;
  background-color: var(--color-neutral-800);
  overflow-y: scroll;
  z-index: 100;
}

#analyze-form-aside .button {
  font-weight: var(--font-wt-bold);
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--rounded);
}

#analyze-form-aside .button:hover {
  background-color: var(--color-primary-dark);
}

#analyze-form-aside .field {
  display: flex;
  flex-direction: column;
}

#analyze-form-aside .field-label {
  color: var(--color-text-high);
  font-weight: var(--font-wt-bold);
}

#analyze-form-aside .field-subtext {
  font-size: var(--font-sz-sm);
}

#analyze-form-aside .field-text {
  height: 48px;
  padding: 0 16px;
  background-color: var(--color-neutral-700);
  border-radius: var(--rounded);
}

#analyze-form-aside .field-button {
  width: fit-content;
  min-height: 40px;
  padding: 0 16px;
}

#analyze-form-aside .field-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-neutral-600);
  border-radius: var(--rounded);
}

#analyze-form-aside .field-checkbox:hover {
  border-color: var(--color-primary);
}

#analyze-form-aside .field-checkbox:checked {
  background: url("../../assets/check.svg") no-repeat center / 75% auto;
}

#analyze-form-aside .multiple-checkbox-toggle-list-button {
  text-decoration: underline;
}

#analyze-form-aside .multiple-checkbox-toggle-list-button:hover {
  color: var(--color-text-high);
}

#analyze-form-aside .multiple-checkbox-container {
  /* Setting a fixed height and 'overflow-y: scroll' creates a scroll area within this box. */
  height: 172px;
  overflow-y: scroll;

  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--color-neutral-600);
  border-radius: var(--rounded);
}

#analyze-form-aside .submit-button {
  min-height: 48px;
}