.form-field {
  --input-height-md: 36px;
  color: var(--grey-dark);
  padding: var(--spacing-sm) 0;
}

.switch-field {
  display: flex;
  overflow: hidden;
  height: var(--input-height-md);
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  display: flex;
  align-items: center;;
  background-color: var(--white);
  color: var(--black);
  font-size: var(--font-sm);
  text-align: center;
  padding: 8px 16px;
  border: 1px solid var(--grey-light);
  transition: all 0.1s ease-in-out;
}

.switch-field label:not(:last-child) {
  margin-right: -1px;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: var(--primary);
  border: var(--primary);
  color: var(--white);
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

.input-field {
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
  height: var(--input-height-md);
}

.input-field label {
  padding: var(--spacing-md);
}

.input-field input {
  background-color: var(--white);
  border-radius: var(--spacing-sm);
  border: 1px solid var(--grey-light);
  color: var(--primary);
  height: var(--input-height-md);
  outline: 0;
  padding: 0 var(--spacing-md);
  transition: all 0.1s ease-in-out;
}

.input-field input:focus {
  border-color: #00132a;
}

.button {
  font-size: var(--font-sm);
  border-radius: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--white);
  border: 1px solid var(--grey-light);
  transition: all 0.1s ease-in-out;
}

.button:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  cursor: pointer;
}

.button:disabled {
  opacity: .8;
  cursor: cursor;
}

.button-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}