input-field input {
  border: none;
  border-radius: 24px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, var(--o1));
  color: var(--g7);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 16px;
  outline: none;
  transition: all 0.2s ease-out;
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
}

input-field input::placeholder {
  color: rgba(0, 0, 0, var(--o4));
  font-weight: 700;
}

input-field input:focus {
  background: rgba(0, 0, 0, var(--o1));
}

input-field input:disabled {
  opacity: var(--o4);
  cursor: not-allowed;
}

input-field[variant="light"] input {
  background: rgba(0, 0, 0, var(--o1));
  color: var(--g7);
}

input-field[variant="light"] input::placeholder {
  color: rgba(0, 0, 0, var(--o4));
}

input-field[variant="light"] input:focus {
  background: rgba(0, 0, 0, var(--o2));
}

input-field[variant="dark"] input {
  background: rgba(255, 255, 255, var(--o1));
  color: white;
}

input-field[variant="dark"] input::placeholder {
  color: rgba(255, 255, 255, var(--o4));
}

input-field[variant="dark"] input:focus {
  background: rgba(255, 255, 255, var(--o2));
}