txtdot/packages/server/static/form.css

.input-grid {
  display: grid;
  /* 2 columns: auto width, min-content width */
  grid-template-columns: auto min-content;

  /* gap: row column */
  gap: 0.5rem 0.25rem;

  width: fit-content;
  margin-top: 0.5rem;
}

.input-row {
  display: flex;
  flex-direction: row;
  align-items: center;

  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;

  font-size: 1rem;
}

label {
  font-size: 0.9rem;
}

.switch-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.switch-btn {
  width: 3rem;
  height: 1.75rem;

  border-radius: 1rem;

  background: var(--outline);

  padding: 0.375rem;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.switch-btn::before {
  content: '';

  display: inline-block;
  width: 1rem;
  height: 1rem;

  transform: translateX(0);
  transition:
    transform 0.15s ease-out,
    opacity 0.15s ease-out;

  border-radius: 1rem;

  background: var(--bg);
}

.switch-btn:hover::before {
  opacity: 0.7;
}

#switch-search {
  display: none;
}

#switch-search:checked ~ .switch-label > .switch-btn {
  background: var(--accent);
}

#switch-search:checked ~ .switch-label > .switch-btn::before {
  /* track width - handle width - (2 * horizontal track padding) */
  transform: translateX(calc(3rem - 1rem - 2 * 0.375rem));
}

#switch-search:not(:checked) ~ .main-form-search {
  display: none;
}

#switch-search:not(:checked) ~ .main-form-url {
  display: grid;
}

#switch-search:checked ~ .main-form-search {
  display: grid;
}

#switch-search:checked ~ .main-form-url {
  display: none;
}